CSS Selector的级联、优先级、冲突、继承以及属性值计算流程

terry 2年前 (2023-09-27) 阅读数 62 #数据结构与算法

1.选择器分类

1.1 标准选择器

通配符选择器
元素选择器、伪元素选择器
类选择器、伪属性选择器❀ID选择器

*{
  /* 通配符选择器 */
  margin: 0;
}
h1{
  /* 元素选择器 */
  font-weight: normal;
}
#content{
  /* ID选择器 */
  background-color: wheat;
}
.item{
  /* 类选择器 */
  padding: 10px;
}
[href]{
  /* 属性选择器 */
  color: red;
}
a:hover{
  /* 伪类选择器 */
  color: blue;
  text-decoration: none;
}
span::before{
  /* 伪元素选择器 */
  content: '《';
}
span::after{
  /* 伪元素选择器 */
  content: '》';
}
复制代码

<h1>一级标题</h1>
<div id="content">
  内容区块
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
  <a href="#">点击</a>
  <br>
  <span>CSS</span>
</div>
复制代码

1.2组合选择器

和选择器 › 2. 优先级
选择器两者的权重
元素选择器/伪元素选择器 1
类选择器/伪类选择器/属性选择器 10
ID选择器 100
对于通配符选择器， - 文本样式，！重要的是我们在开发中不建议使用，这里不讨论它们。另外，下面选择器的顺序也是从上到下书写，避免因为后面的样式取代了前面的样式而误会是否生成了当前的结果。可以先把所有的css样式注释掉，然后从下到上一一打开，看看粗细是否影响页面字体大小的变化。
```
#content span:hover{
  /* 权重：111 */
  font-size: 29px;
}
#content span{
  /* 权重：101 */
  font-size: 26px;
}
div p span:hover{
  /* 权重：13 */
  font-size: 23px;
}
p[class=p1] span{
  /* 权重：12 */
  font-size: 21px;
}
span.sp1{
  /* 权重：11 */
  font-size: 19px;
}
.sp1{
  /* 权重：10 */
  font-size: 16px;
}
span{
  /* 权重：1 */
  font-size: 13px;
}

p span::before{
  /* 权重：3 */
  content: '》';
}
span::before{
  /* 权重：2 */
  content: '> ';
}
复制代码
```
```
<div id="content">
  <p class="p1">
    <span class="sp1">CSS</span>
  </p>
</div>
复制代码
```
3。属性值计算过程
元素如何表示？每个元素对应的数百个 CSS 属性必须有值才能呈现在页面上。是的，每个元素都有数百个 CSS 属性值。我们通常只设置一小部分的原因是因为我们只关心我们需要改变的样式。您尚未设置的样式当然会由浏览器的默认样式处理。
至于查看每个元素的数百个 CSS 属性值，可以在控制台的 Computed of Elements 下看到，然后选择 Show All。
所以，为了显示一个元素，它必须经过下面描述的四个步骤。在这四个步骤中，所有数百个 CSS 属性值最终都在元素可以显示之前设置完毕。我们结合下面的例子来详细解释一下h1元素的上百个属性值是如何围绕h1属性值计算过程从诞生到最终确定的：
```
div{
  text-align: center;
  height: 100px;
  background-color: pink;
}
h1{
  color: maroon;
  font-weight: normal;
  font-style: italic;
}
div .red{
  color: red;
}
h1.blue{
  color: blue;
}
复制代码
```
```
<div>
  <h1 class="red blue">属性值计算过程</h1>
</div>
复制代码
```
3.1。首先确定无冲突属性值
这一步首先要找出两个主要的样式来源：开发者编写的样式和浏览器设置的浏览器样式❀不是此处考虑）
- 浏览器默认样式：
  显示：块；（不冲突，属性已指定）
  font-size: 2em; （不冲突，属性已指定）
  font-weight：粗体；（浏览器默认设置样式与开发者设置的h1样式冲突，稍后确定）
- 开发者编写的样式：
  font-style：斜体；（无冲突，指定属性）
3.2。处理冲突值
这一步是最复杂的，必须分为以下三种情况：
- 1。开发者的写作风格与浏览器的默认风格冲突，开发者的写作风格获胜。
  字重：正常；（开发者设置的h1样式获胜，属性设置完毕）
- 2.选择器冲突：这里利用了前面提到的优先级信息，经过评估后确定最终值。。三个选择器同时设置颜色，权重分别为：
  h1：权重：1
  div .red：权重：11
  h1.blue：权重：11s，但最后一个两个权重相同，颜色值确定
- 3.顺序冲突：优先级相同，就近原则，后顺序胜。这还包括（css的三种写法：内联>头部>外部）
  color: blue; （优先级相同，根据就近原则、属性确定）
3.3。继承
仅继承与文本相关的属性。如果当前元素的父元素和父元素有文本相关的属性值，则继承
- text-align: center; （文本相关元素继承，属性确定）
- height: 100px; （（非文本相关的不继承）
- background-color：pink；（非文本相关的不继承）
3.4.使用浏览器默认值
其他没有定义样式的开发者使用浏览器样式值
- height: 45px;（使用h1字体的默认高度值）
- background-color:透明;（background-color使用默认值透明，可以看到h1也是页面上是粉红色的，不过这个不是继承，而是本身是透明的，那么就会出现下面的颜色，这一点请特别注意。）
最后说一下CSS，我认为顺序计算从第一步开始整个属性值计算过程中，先去掉不冲突的属性值，然后是第二步解决冲突，第三步继承，最后是浏览器的默认样式，都有痕迹到处都是级联。我认为这也是 CSS 的第一步。级联给出了这项技术的高级概述。
作者：凌吉
链接：https://juejin.cn/post/6896414154753015815
来源：掘金
版权归作者所有。商业转载请联系作者获得许可。非商业转载请注明出处。