CSS 选择器的三种机制：选择器的组合、选择器优先级、以及伪元素

最新推荐文章于 2023-04-01 11:47:41 发布

sameen1900

最新推荐文章于 2023-04-01 11:47:41 发布

阅读量354

点赞数 1

文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_38526167/article/details/129843690

版权

CSS 选择器的三种机制：选择器的组合、选择器优先级、以及伪元素

第一优先级

第二优先级

第三优先级


.c,.a>.b.d {
    /*......*/
}
等价于

.c {
    /*......*/
}
.a>.b.d {
    /*......*/
}

“空格”：后代，表示选中所有符合条件的后代节点，例如“ .a .b ”表示选中所有具有 class 为 a 的后代节点中 class 为 b 的节点。
“>” ：子代，表示选中符合条件的子节点，例如“ .a>.b ”表示：选中所有“具有 class 为 a 的子节点中，class 为 b 的节点”。
“~” : 后继，表示选中所有符合条件的后继节点，后继节点即跟当前节点具有同一个父元素，并出现在它之后的节点，例如“ .a~.b ”表示选中所有具有 class 为 a 的后继中，class 为 b 的节点。
“+”：直接后继，表示选中符合条件的直接后继节点，直接后继节点即 nextSlibling。例如 “.a+.b ”表示选中所有具有 class 为 a 的下一个 class 为 b 的节点。
“||”：列选择器，表示选中对应列中符合条件的单元格。

比较常用的连接方式是“空格”和“>”


specificity = base * base * a + base * b + c
base 是一个“足够大”的正整数

行内属性的优先级永远高于 CSS 规则，浏览器提供了一个“口子”，就是在选择器前加上“!import”。

同一优先级的选择器遵循“后面的覆盖前面的”原则

实践中，建议你“根据 id 选单个元素”“class 和 class 的组合选成组元素”“tag 选择器确定页面风格”这样的简单原则来使用选择器，不要搞出过于复杂的选择器。

目前兼容性达到可用的伪元素有以下几种。

::first-line：表示元素的第一行，必须出现在最内层的块级元素之内

::first-letter：表示元素的第一个字母

::before

::after

::before 和 ::after 伪元素是真正的无中生有，造出一个元素。

::before 表示在元素内容之前插入一个虚拟的元素，::after 则表示在元素内容之后插入。这两个伪元素所在的 CSS 规则必须指定 content 属性才会生效


<p class="special">I'm real element</p>

p.special::before {
    display: block;
    content: "pseudo! ";
}

::before 和 ::after 还支持 content 为 counter


<p class="special">I'm real element</p>
p.special::before {
    display: block;
    content: counter(chapno, upper-roman) ". ";
}

::before 和 ::after 中支持所有的 CSS 属性

此文章为3月Day29学习笔记，内容来源于极客时间《重学前端》，推荐该课程。

关注