CSS选择器层叠、优先级、冲突、继承、以及属性值计算过程

1. 选择器分类

1.1 常规选择器

1. 通配符选择器
2. 元素选择器、伪元素选择器
3. 类选择器、伪类选择器
4. 属性选择器
5. 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 组合选择器

1. 并且选择器
2. 子选择器
3. 后代选择器
4. 相邻兄弟选择器
5. 兄弟选择器
6. 分组选择器(语法糖)

div.red{
  /* 并且选择器 */
  background-color: red;
}
div > ul{
  /* 子选择器 */
  padding-left: 0;
}
div li{
  /* 后代选择器 */
  padding-bottom: 10px;
}
.two + li{
  /* 相邻兄弟选择器 */
  font-size: 1.5em;
}
.six ~ li{
  /* 兄弟选择器 */
  font-size: 0.6em;
}
div.red, li.two, li.six{
  /* 三个并且选择器组成的分组选择器 */
  color: blue;
}
复制代码

<div class="red">红色区域</div>
<div>
  <ul>
    <li>编号1</li>
    <li class="two">编号2</li>
    <li>编号3</li>
    <li>编号4</li>
    <li>编号5</li>
    <li class="six">编号6</li>
    <li>编号7</li>
    <li>编号8</li>
    <li>编号9</li>
  </ul>
</div>
复制代码

2. 优先级

对于通配符选择器、行内样式、!important在开发中不推荐使用的这里就不做探讨了，另外下面的选择器的顺序也是按照由大到小书写的，防止造成是否是因为后面样式覆盖前面样式才产生当前结果的误解。大家可以通过先全部注释css样式，然后在逐步由下往上一个个打开查看效果，看是否因为权重才影响页面字体大小的变化。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20733.html

#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属性值，之所以我们平常只设置很少的一部分，是因为我们只关心我们需要改变的样式，那些您没有设置的样式当然就由浏览器默认样式代劳了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20733.html

关于如何查看每个元素的几百个CSS属性值，您可以通过控制台的Elements的Computed，然后选中show all就可以看到了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20733.html

所以一个元素要显示出来必须要经过下面介绍的四个步骤，在这四个步骤中最终把所有几百个CSS属性值确定了，元素才能呈现出来。让我们结合下面的事例，围绕着h1属性值的计算过程来详细解释h1元素的几百个属性值是怎么由诞生到最后确定的：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20733.html

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. 无冲突属性值首先确定

在这一步我们首先要明确样式的两个主要来源：开发者书写的样式和浏览器默认样式 (用户设置浏览器样式这里不考虑)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20733.html

• 浏览器有默认的样式：
  • display: block; (无冲突，属性确定)
  • font-size: 2em; (无冲突，属性确定)
  • font-weight: bold; (浏览器有默认的样式和开发者设置的h1样式有冲突，待确定)
• 开发者书写的样式：
  • font-style: italic; (无冲突，属性确定)

3.2. 处理冲突值

这一步是最复杂的，需要分以下三种情况：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20733.html

• 1、开发者书写样式与浏览器默认样式冲突，开发者书写样式胜出。
  • font-weight: normal; (开发者设置的h1样式胜出，属性确定)
• 2、选择器冲突：这里就要用到前面提到的优先级知识了，判断之后确定最终的值。三个选择器同时设置了color，权重分别为：
  • h1: 权重：1
  • div .red: 权重：11
  • h1.blue: 权重：11
    

    h1排除，但是后面两个权重相同，color值待定文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20733.html

• 3、先后顺序冲突：优先级相同，临近原则，顺序在后者胜出。这里也包括(css三种书写方式：行内>头部>外部)
  • color: blue; (优先级相同，根据临近原则，属性确定)

3.3. 继承

只有跟文字相关的属性才会被继承。如果当前元素的父级元素，以及祖先元素设置了跟文字相关的属性值的话就会被继承文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20733.html

• text-align: center; (文字相关被继承，属性确定)
• height: 100px; (非文字相关不继承)
• background-color: pink; (非文字相关不继承)

3.4. 使用浏览器默认值

其他的开发者没有设置样式的就全部使用浏览器的默认样式值文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20733.html

• height: 45px; (使用h1字体默认的高度值)
• background-color: transparent; (背景色使用默认值透明，在页面看到h1的背景色也是粉色，但是这不是继承，而是本身透明，才让后面的颜色显示了出来，关于这点要特别注意。)

最后，说一下层叠这个词，我觉得层叠发生在属性值计算的整个过程，从第一步首先剥离出没有冲突的属性值，紧接着，第二步解决冲突，第三步的继承，再到最后托底的浏览器的默认样式，处处都有层叠的痕迹，我想这也是CSS第一个单词Cascade对这一技术的高度概况了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20733.html