第45篇 CSS属性选择器

1，内置函数复习
 ???1.1 reduce

 ???????#reduce 从可迭代对象里面不断的取值累加 ???????from functools import reduce ???????li = [1,2,3,4,5,6] ???????ret = reduce(lambda x,y:x+y,li) ???????print(ret) ???????res = reduce(lambda x,y:x+y,range(1,101)) ???????print(res)

 ???1.2 sorted
 ???????1.2.1
 ???????????按照年龄进行排序

li = [ ???????????{‘name‘:‘gold‘,‘age‘:‘40‘}, ???????????{‘name‘:‘eva-J‘,‘age‘:‘18‘}, ???????????{‘name‘:‘naza‘,‘age‘:‘19‘}, ???????????{‘name‘:‘gaoxin‘,‘age‘:‘20‘}, ???????????{‘name‘:‘yuanju‘,‘age‘:‘50‘}, ???????????] ???????????li2 = sorted(li,key=lambda x:x[‘age‘],reverse=True) ???????????print(li2)

 ???????1.2.2

#去重，并保持原来的次序 ???????????li = [1,4,5,8,2,6,9,12,2,14,4,5,1,2,3] ???????????#方法一 ???????????li2 = [] ???????????for i in li : ???????????????if i not in li2: ???????????????????li2.append(i) ???????????print(li2) ?# [1, 4, 5, 8, 2, 6, 9, 12, 14, 3]

 ???????????#方法二 ???????????li_new = list(set(li)) ???????????li_last = sorted(li_new,key=li.index)#按照li原来的顺序排序 ???????????print(li_last)

 ???1.3 zip方法得到是一个迭代器，里面的元素的数据类型是元组

 ???????#采用dict强制转化成字典 ???????keys = [‘name‘,‘age‘,‘salary‘] ???????values = [‘andy‘,18,50] ???????d= dict(zip(keys,values)) ???????print(d)#{‘name‘: ‘andy‘, ‘age‘: 18, ‘salary‘: 50}

 ????????#采用list强制转化成列表 ???????keys = [‘name‘,‘age‘,‘salary‘] ???????values = [‘andy‘,18,50] ???????ret = zip(keys,values) ???????li = list(ret) ???????print(li)#[(‘name‘, ‘andy‘), (‘age‘, 18), (‘salary‘, 50)]

 ???????#迭代器逐个取值的

 ???????keys = [‘name‘,‘age‘,‘salary‘] ???????values = [‘andy‘,18,50] ???????ret = zip(keys,values) ???????ret_iter = iter(ret) ???????while 1: ???????????try:print(ret_iter.__next__()) ???????????except StopIteration: ???????????????break

2，正式进入CSS
 ???1. 定义
 ???????HTML 超文本标记语言
 ???????CSS层叠样式表Cascading Style Sheets
 ???2. 语法
 ???????标签选择器 {k1:v1,k2:v2}


 ???3. CSS代码存放的位置
 ???????1. 直接写在标签中的style属性
 ???????2. 在head标签中的style标签内
 ???????3. 写在单独的SCC文本中，通过link标签引用

 ???4. SCC选择器
 ???????如何在HTML代码中找到相应的标签
 ???????1. 基本选择器
 ???????????1. ID标签选择器 ???-->#p1 {}
 ???????????2. 标签选择器 ?????-->div {}
 ???????????3. 类选择器 ???????-->.c1 {}
 ???????????4. 通用选择器 ?????-->* {}
 ???????2. 组合选择器
 ???????????1. 子孙选择器（后代选择器） ????????????-->div p {}
 ???????????2. 儿子选择器（紧挨着父标签的子标签） ???-->div>p {}
 ???????????3. 毗邻选择器（紧挨着的下面的标签） ?????-->div+p {}
 ???????????4. 弟弟选择器（同级下面的所有标签） ?????-->div~p {}
 ??????????????????????????????????????????????????-->div~* {}
 ???????3. 属性选择器
 ???????????1. 有某个属性的标签 ????????????????????-->div[title] {}
 ???????????2. 有某个属性并且属性值等于给定的 ???????-->div[title=‘hello‘] {}
 ??????????????????????????????????????????????????-->div[title^=‘hello‘] {} ?以hello开始
 ??????????????????????????????????????????????????-->div[title$=‘hello‘] {} ?以hello结束
 ??????????????????????????????????????????????????-->div[title*=‘hello‘] {}
 ??????????????????????????????????????????????????-->div[title~=‘hello‘] {} ?按空格分割之后的列表中是否含有
 ???????4. 分组和嵌套
 ???????????1. 分组应用于多个选择器找到标签应用相同的样式
 ???????????????div,p {}
 ???????????2. 嵌套
 ????????????????子孙 .c1 p {}
 ????????????????儿子 .c1>p {}
 ???????5. 伪类选择器
 ???????????????????/*连接的默认样式*/
 ???????????????????a:link {color: red}

 ???????????????????/*访问过的连接*/
 ???????????????????a:visited {color: yellow}

 ???????????????????/*点击的一瞬间的样式*/
 ???????????????????a:active {color: #0000cc}

 ???????????????????/*鼠标放上去之后的样式*/
 ???????????????????span:hover {color: deeppink}

 ???????????????????/*文本框输入的样式*/
 ???????????????????input:focus {">伪元素选择器
 ???????????????????div.c1:first-letter {color: red;font-size: 48px}
 ???????????????????p:before {content: ‘*‘;color: #0000cc}
 ???????????????????p:after {content: ‘[?]‘;color: deeppink}
 ???5. 选择器的优先级
 ???????1. 当选择器相同的时候
 ???????????谁最后加载谁生效！！
 ???????2. 选择器不同的时候
 ???????????1. 选择器优先级的权重：
 ???????????????内联样式（1000） > ID选择器（100） > class选择器（10） >元素选择器（1）
 ???????????2. 不讲道理的！important

第45篇 CSS属性选择器

原文地址：https://www.cnblogs.com/cavalier-chen/p/9768103.html