CSS样式优先级

CSS样式列举

---

在说CSS样式的优先级之前，我们先来了解一下CSS有种表示样式的形式。

层叠样式类型有：

1. 内联样式<a style="">；
2. 内部样式<style></style>；
3. 外部样式<link>；
4. 浏览器用户自定义样式；
5. 浏览器默认样式；

层叠样式内部的选择器有：

1. id选择器，#id{}；
2. 类选择器，.class{}；
3. 属性选择器，[title]{}；
4. 伪类选择器，:pseudo-class {}；
5. 伪元素选择器，p:first-letter {}；
6. 标签选择器，p{};
7. 通配选择器，*{};

组合选择器有：

1. 后代选取器(以空格分隔)，div p{}；
2. 子元素选择器(以大于号分隔），div>p{}；
3. 相邻兄弟选择器（以加号分隔），div+p{}；
4. 普通兄弟选择器（以波浪号分隔），div~p{}；

CSS优先级规则

---

1. CSS继承性

CSS的继承性是指作用在标签上的CSS属性能够传递给其自标签。

例1：

<div id='div1' style="color: red;">
    <p id='p1' >段落1</p>
    <div id='div2' style="color: blue;">
        <p id='p2'>段落2</p>
        <p id='p3' style="color: green;">段落3</p>
    </div>
</div>

结果：

由例1可以看出：p1继承了div1的样式；p2继承了div2的样式，而非集成div1的样式；p3则直接使用了自己的样式。

所以在继承性上得出两条优先级规则：

规则1： 最近的祖先样式比其他祖先样式优先级高。

规则2： ‘直接样式’比‘继承样式’优先级高

2. 层叠样式优先级

如果多重样式相互覆盖，如外部样式、内部样式和内联样式同时渲染一个标签时，遵循以下规则。

规则3： 标签有多重样式时的优先级：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式。特殊地，如果外部样式放在内部样式之后，外部样式覆盖内部样式。

例2：外部样式覆盖内部样式

<style type="text/css">
    #p3{color: greenyellow;}
</style>
<link rel="stylesheet" type="text/css" href="css.css" />

3. 选择器的优先级

规则4： 内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

4. 组合选择器的优先级

规则5： 不同的选择器分配权值，令：内联样式权值为1000；id选择器权值为100；类选择器、属性选择器和伪类选择器权值为10；标签选择器和伪元素选择器的前中为1。权值的和越大，优先级越高。如果权值和相同，则按照“就近原则”。（规则4包含在该规则中）

注意： 选择器的权值不能进位 。比如：有11个类选择器，按理说权重应该是110。但由于权值不能进位，所以11个类选择器的权值也不能超过100，可以理解为99.99999。

例3：

//css
<style type="text/css">
    div #div2 #p1 {color: #CCCCCC;}/*样式1，权重201*/
    div .myclass{color: red;}/*样式2，权重11*/
    #div1 #div2 p{color:blue;}/*样式3，权重201*/
    div p{color: greenyellow;}/*样式4，权重2*/
</style>

//html
<div id="div1">
    <div id='div2'>
        <p id='p1' class='myclass'>段落1</p>
    </div>
</div>

上例中“段落1”的颜色为蓝色。因为样式1和样式3的权重最大且相等，而根据“就近原则”，样式3的优先级最高。

5. 有多重样式和多个选择器时的优先级

规则6： 当某一元素有重样式同时又有多个选择器时，应先遵循规则4，在选择器相同时，遵循规则5。

6. important

CSS提供了一种可以完全忽略以上规则的方法，当你一定、必须确保某一个特定的属性要显示时，可以使用这个技术。

规则7： 属性后插有 !important 的属性拥有最高优先级。若同时插有 !important，则再利用规则5判断优先级。

//css
<style>
    p{color:red !important;}
    #p1{color: blue;}
</style>

//html
<p id='p1'>段落1</p>

在此例中，“段落1”的颜色为红色。如果按权值确定优先级，应该为id选择器的优先级最高，但这里的标签选择器中，加入了important，无视了优先级规则，直接将自身所在的样式确定为最高优先级，所以“段落1”的颜色为红色。

参考：

---

[1] css选择器优先级深入理解

[2] css样式优先级问题

[3] CSS 样式优先级

[4] 详解CSS中的选择器优先级顺序

[5] CSS中样式覆盖优先顺序详解

---

我的所有web前端代码、笔记和文章都保存在我的码云中，欢迎访问！