今日内容:
高级选择器
1.子类选择器
用 > 表示
类比于相对路径
选择的是前一级标签的子标签
2后代选择器
用空格表示
选择的是前一级标签的后代标签
3并集选择器
用,逗号表示
选择的是用逗号连接的标签
4交集选择器
用标签名字作为开头 ,后面跟id或者是类选择器(注意,没有空格)
5.通用选择器
*选择所有的标签(使用场景一般是删除所有的空格)
6.属性选择器
[属性名] 带这个属性的标签
[属性名=’’需要匹配的属性值’’ ] 带有属性,属性名符合匹配的要求
[属性名^=’xxxx’] 匹配以xxx开头的字符串
[属性名$=’xxxx’] 匹配以xxx结尾的字符串
[属性名*=’xxx’] 匹配属性值包含的字符串
7.伪装选择器
简称: a :LoVe HAte 爱恨
Link 未被访问的链接
Visited 访问过的链接
Hover 鼠标悬停的样式
Active 鼠标按下时的样式
选择标签
选择第一个孩子标签:
:first-child
选择最后一个孩子标签
:last-child
选择指定的孩子标签:
:nth-child(n) 选择第N个孩子
选择指定的字符:
P : first-letter : 选择第一个字符
P : before 在标签的最前面添加一个标签内容
P : after 在标签的最后面添加一个标签内容
8.继承性
子标签可以继承父标签的样式:
Color
Font- ,
Text-
Line-
9.层叠性
(选择器权重相同的时候) 后面添加的样式会覆盖全面的样式
10.权重
类比id标签 100 ,类标签 10, 普通标签 1 谁的分高谁的权重大
Id 100
类 10
普通标签 1
!important 权重无限大
如果都有!important的时候,比较权重的大小