CSS特适度和层叠

CSS特适度和层叠

特制度

特指度(specificity): 特指度表示一个css选择器表达式的重要程度,可以通过一个公式来计算出一个数值,数越大,越重要。

一个特制度由选择符本身的组成部分决定，一个特制度由四个部分构成，例如 0,0,0,0。

选择符的特制度规则如下：

• 选择符的每个 ID 属性值加 0,1,0,0
• 选择符的每个类属性值，属性选择或伪类加 0,0,1,0
• 选择符中的每个元素和伪元素加 0,0,0,1
• 连结符和通用符不加特制度
• 行内样式的特制度是 1,0,0,0，这也是为什么行内元素优先级最高

/*
加入这两个修饰同一个元素的同一种属性，则 #python 会胜出，因为 h1.java 的特指度是 0,0,1,1 而 #python 的特制度是 0,1,0,0 
我们通过特制度的计算可以推算出样式的优先级
*/
h1.java - #python

#python 0,1,0,0

.python 0,0,1,0

h1[class="python"] 0,0,1,0

/* 用类选择器来指定ID属性，最终的特制度是 0,0,1,0*/
h1[id="python"] 0,0,1,0 

div + span 0,0,0,2

* 0,0,0,0 (这里需要注意，就算是特制度为0，优先级也会大于没有特制度，比如会覆盖继承，滥用 * 是一个陷阱)

继承

当子元素没有特别指定样式时，它会继承父元素的样式

<div>
    Javascript : 
    <span>
        Hello,World!!!
    </span>
</div

/*
此时的 Hello,World!!! 也会变成 黄色，应为继承是span 继承 div 是没有特制度，这个时候会被 特制度为
0,0,0,0 的通配符覆盖，这一是不要滥用 * 的原因
*/
div {
  color : red;
}

*{
  color : yellow
}

不是所有的样式都是默认继承的，以下是样式的继承情况：

来自一个老哥的详细总结：https://www.cnblogs.com/thislbq/p/5882105.html

---

样式的来源

样式有三个来源：

• 开发人员提供的样式
• 用户代理体用的样式，也就是浏览器，也就是默认样式，例如 a 元素未访问是蓝色
• 用户提供的样式，例如用户可以通过谷歌浏览器来自己修改样式

优先级： 开发人员 > 用户提供 > 用户代理

使用 !important 可以设置权重，有此声明的样式将忽略特制度规则获得最高的优先级

   <span id={"js"}>
            Hello,World!!!
        </span>

/*此时 span 是黄色，尽管 id 的特制度更大*/
span {
  color : red !important;
}

#js{
  color : yellow
}

结合 !important 的优先级如下：

1. 开发人员的 !important
2. 用户人员的 !important
3. 开发人员的样式
4. 用户人员的样式
5. 用户代理的样式

当样式的特制度相同，且未指定权重 （!important）时，则按照先后顺序来排序，后面声明的样式会覆盖前面声明的样式

/* 假如它们指向同一个元素，由于优先级都是 0,0,1,0 ,这个时候后声明的 div + span 会胜出*/
.python{
    color : red
}

div + span {
	color : yellow
}

我们有时候会使用 @import(url) 来引入外部css样式表，它要求必须要在 <style></style> 的第一行，那么我们后面声明的样式，如果特制度相同，且权重相同，将会覆盖外部样式表。