属性选择器
[attribute]
选择所有带
foo属性的元素
[attribute=value]
> 选择 attribute=value 的所有元素。
[foo]{
background-color:red;
}
[attribute~=value]
选择 attribute 属性包含单词 value 的所有元素。
[foo~=abc]{
background-color:red;
}
[attribute^=value]
选择其 attribute 属性值以 value 开头的所有元素。类似正则的 ^,以什么开始
[foo^=abc]{
background-color:red;
}
[attribute$=value]
选择其 attribute 属性值以
value结束的所有元素。类似正则的$,以什么结束
[foo$=abc]{
background-color:red;
}
[attribute*=value]
选择其
attribute属性中包含value子串的每个元素。
[foo*=abc]{
background-color:red;
}
[attribute|=value]
选择
attribute属性值以value开头的所有元素。
文档结构选择器
后代选择器 element element
子选择器 element>element
相邻兄弟选择器 element+element
h1+p{
color:red;
}
p1-jj.byteimg.com/tos-cn-i-t2…
一般兄弟选择器 element1~element2
选择前面有 element1 元素的每个 elem 元素。
通配符
*{
}
优先级
!important>行内样式>ID选择器>类、伪类、属性>标签、伪元素>通配符
优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下：
如果存在内联样式，那么 A = 1, 否则 A = 0; B 的值等于 ID选择器 出现的次数; C 的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数; D 的值等于 标签选择器 和 伪元素 出现的总次数 。
li /* (0, 0, 0, 1) */
ul li /* (0, 0, 0, 2) */
ul ol+li /* (0, 0, 0, 3) */
ul ol+li /* (0, 0, 0, 3) */
h1 + *[REL=up] /* (0, 0, 1, 1) */
ul ol li.red /* (0, 0, 1, 3) */
li.red.level /* (0, 0, 2, 1) */
a1.a2.a3.a4.a5.a6.a7.a8.a9.a10.a11 /* (0, 0, 11,0) */
#x34y /* (0, 1, 0, 0) */
li:first-child h2 .title /* (0, 0, 2, 2) */
#nav .selected > a:hover /* (0, 1, 2, 1) */
html body #nav .selected > a:hover /* (0, 1, 2, 3) */
比较规则是: 从左往右依次进行比较 ，较大者胜出，如果相等，则继续往右移动一位进行比较 。如果4位全部相等，则后面的会覆盖前面的
