CSS权重与选择器
Rio 2022-12-31
css
总览
CSS权重与各类选择器笔记总结
# CSS权重
!important- 内联样式 -> 1,0,0,0
- ID属性值 -> 0,1,0,0
- 类选择器、属性选择器或伪类 -> 0,0,1,0
- 元素选择器、伪元素选择器、后代选择器和兄弟选择器 -> 0,0,0,1
# 后代选择器:
又称为包含选择器。后代选择器可以选择作为某元素后代的元素。不管是儿子还是孙子都会被选中
h1 em {color:red;}
<h1>
This is a
<em>important</em>
heading
</h1>
1
2
3
4
5
6
2
3
4
5
6
# 兄弟选择器：
‘+’选择器可选择紧接在另一元素后的元素，且二者有相同父元素。而‘~’选择器则表示某元素后所有同级的指定元素，强调所有的
h1 ~ p {color: blue}
h1 + p {color: red}
<h1>This is a heading.</h1>
<p>This is paragraph.</p> red
<p>This is paragraph.</p> blue
<p>This is paragraph.</p> blue
1
2
3
4
5
6
2
3
4
5
6
# 子代选择器：
M>N 子代选择器用于选中元素内部的子元素,只能选中子元素
h1 > strong {color:red;}
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> <strong>very</strong>important.</h1>
em中的strong不会被选中
1
2
3
4
2
3
4
# 交集选择器
交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格
p.one 选择的是： 类名为 .one 的 段落标签。
# 并集选择器
是各个选择器通过逗号连接而成的，任何形式的选择器，都可以作为并集选择器的一部分
比如 .one, p , #test {color: red} 表示 .one 和 p 和 #test 这三个选择器都会执行颜色为红色
# 属性选择器
属性选择器可以根据元素的属性及属性值来选择元素。
具体属性选择器
[class="test box"]{color: red;}
a[href] {color:red;} 只对有 href 属性的锚（a 元素）应用样式
input[type=text] {color: pink;} 对input元素type属性值为text生效
1
2
3
2
3
部分属性选择器
[class ~="b"] 选择class属性值在用空格分隔的词列表中包含词语"b"的所有元素
例如：class="ab"不满足[class ~="b"]，而class="a b"或class="b"满足
[class |="b"] 选择class属性值等于b或以b-开头的所有元素
例如：class="ab"或class="ab-"不满足[class |="a"]，而class="a"或class="a-"满足
[class ^="b"] 选择class属性值以"b"开头的所有元素
[class $="b"] 选择class属性值以"b"结尾的所有元素
[class *="b"] 选择class属性值包含"b"的所有元素
1
2
3
4
5
6
7
2
3
4
5
6
7
# CSS选择器匹配顺序
从右向左，为什么不是从左向右？如果正向解析，例如「div div p em」，我们首先就要检查当前元素到 html 的整条路径，找到最上层的 div，再往下找，如果遇到不匹配就必须回到最上层那个 div，往下再去匹配选择器中的第一个 div，如果不匹配则需要回溯若干次，效率很低
从右到左的解析方式可以提高选择器的性能，在面对复杂的选择器和大量元素的情况下。因为从右到左的解析可以尽早过滤掉不匹配的元素，减少了需要遍历的元素数量，提高了选择器的匹配速度。需要注意的是，并非所有的CSS选择器都适用于从右到左的解析方式，例如属性选择器、伪类选择器等可能需要从左到右进行解析。浏览器在解析CSS选择器时会根据具体的情况选择最优的解析方式
