CSS选择器是如何起作用的？

你好同学，我是沐爸，欢迎点赞、收藏、评论和关注！

CSS选择器在网页设计和开发中起着至关重要的作用，它们定义了哪些HTML元素应当被应用特定的样式规则。CSS选择器的工作机制主要基于以下几个方面：

1. 选择器的类型

CSS选择器有多种类型，它们以不同的方式选择HTML元素。这些选择器包括id选择器、类选择器、元素选择器、属性选择器、伪类和伪元素选择器、子选择器、后代选择器、相邻选择器等等。

2. 选择器的匹配过程

当浏览器解析CSS文件并准备将样式应用到HTML文档时，它会遍历文档中的所有元素，并尝试将CSS选择器与这些元素进行匹配。匹配过程遵循一定的优先级规则，通常是从最具体的选择器（如ID选择器）到最通用的选择器（如通用选择器*）。

3. 样式的应用

一旦元素与选择器匹配，相应的样式规则就会被应用到这些元素上。这包括元素的外观（如颜色、字体、边框等）、布局（如位置、大小、边距等）以及响应式行为（如媒体查询定义的样式）。

4. 优先级权重

一个元素很可能被多个选择器匹配上，每个选择器都有自己的样式，这些样式可能相互冲突。为了解决这个问题，CSS定义了优先级，每个优先级都有相应的权重，选择器的权重越高，即优先级越高。

选择器	格式	优先级权重
id选择器	#id	100
类选择器	#classname	10
属性选择器	a[ref=“eee”]	10
伪类选择器	li:last-child	10
标签选择器	div	1
伪元素选择器	li:after	1
相邻兄弟选择器	h1+p	0
子选择器	ul>li	0
后代选择器	li a	0
通配符选择器	*	0

Tips：

1. 除了选择器有优先级权重，内联样式和 !important 声明的样式也有优先级权重。其中，内联样式的权重为1000，高于各种选择器的权重，而 !important 的权重为10000，所以 !important 声明的样式的优先级最高。
2. 如果优先级相同，则最后加载的样式生效。以类选择器和属性选择器为例，两者的优先级是一样的，那么谁最后加载谁生效。

<h1 class="title">Title</h1>

<style>
    [class="title"] {
        color: blue;
    }
    .title {
        color: red; /* 生效 */
    }
</style>

<style>
    .title {
        color: red;
    }
    [class="title"] {
        color: blue; /* 生效 */
    }
</style>

这个规则同样适用于添加了 !important 属性的样式。

<h1 class="title">Title</h1>

<style>
    [class="title"] {
        color: blue !important;
    }
    .title {
        color: red !important; /* 生效 */
    }
</style>

<style>
    .title {
        color: red !important;
    }
    [class="title"] {
        color: blue !important; /* 生效 */
    }
</style>

3. 继承得到的样式的优先级最低，低于通配符等选择器。在下面的示例中，p标签内容的字体颜色为 blue。

<div class="content">
    <p class="desc">This is Description.</p>
</div>

<style>
    * {
        color: blue;
    }
    .content {
        color:  red;
    } 
</style>

5. 继承

某些CSS属性可以从父元素继承。这意味着，如果子元素没有显式指定某个属性，它将从父元素那里继承该属性的值。这种机制有助于减少样式声明的数量，并促进样式的统一和一致性。

综上所述，CSS选择器通过精确匹配HTML元素，并根据优先级和层叠规则应用样式规则，从而实现对网页样式的控制和定制。

好了，分享结束，谢谢点赞，下期再见。