[css] 第23天 说说CSS的优先级是如何计算的？

[haizhilin2013]

第23天 说说CSS的优先级是如何计算的？

[xiangshuo1992]

发现之前已经思考了这个问题，今天刚好回顾复习一下。
原文链接：https://xiangshuo.blog.csdn.net/article/details/52749250

以下是回答：

选择器种类

严格来讲，选择器的种类可以分为三种：标签名选择器、类选择器和ID选择器。而所谓的后代选择器和群组选择器只不过是对前三种选择器的扩展应用。而 在标签内写入 style="" 的方式，应该是CSS的一种引入方式，而不是选择器，因为根本就没有用到选择器。而一般人们将上面这几种方式结合在一起，所 以就有了5种或6种选择器了。

三种基本的选择器类型
语法如下：
◆标签名选择器，如：p{}，即直接使用HTML标签作为选择器。
◆类选择器，如.polaris{}。
◆ID选择器，如#polaris{}。

伪类，属性选择器特指度等同于类
伪元素特指度等同于标签名选择器

扩展选择器
◆后代选择器，如 .polaris span img{}，后代选贼器实际上是使用多个选择器加上中间的空格来找到具体的要控制标签。
◆群组选择器，如 div,span,img{}，群组选择器实际上是对CSS的一种简化写法，只不过把有相同定义的不同选择器放在一起，省了很多代码。

特指度-优先级计算

我们需要引入一个概念——特指度（specificity）。特指度表示一个css选择器表达式的重要程度，可以通过一个公式来计算出一个数值，数越大，越重要。
这个计算叫做“I-C-E”计算公式，

I——Id；
C——Class；
E——Element；

即，针对一个css选择器表达式，遇到一个id就往特指度数值中加100，遇到一个class就往特指度数值中加10，遇到一个element就往特指度数值中加1。

下面举几个css表达式的特指度计算结果，大家也自己算一算，是不是对的：

还有一个重点要注意：!important 优先级最高，高于上面一切。* 选择器最低，低于一切。

后代选择器的定位原则

在这里介绍一下对于后代选择器，浏览器是如何查找元素的呢？

浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找。比如div#divBox p span.red{color:red;}，浏览器的查找顺序如下：先查找html中所有 class='red' 的 span 元素，找到后，再查找其父辈元素中是否有 p 元素，再判断 p 的父元素中是否有 id 为 divBox 的 div 元素，如果都存在则匹配上。
浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。

简洁、高效的CSS

所谓高效的CSS就是让浏览器在查找style匹配的元素的时候尽量进行少的查找，下面列出一些我们常见的写CSS犯一些低效错误：

◆不要在ID选择器前使用标签名
一般写法：div#divBox
更好写法：#divBox
解释： 因为ID选择器是唯一的，加上 div 反而增加不必要的匹配。

◆不要再class选择器前使用标签名
一般写法：span.red
更好写法：.red
解释：同第一条，但如果你定义了多个.red，而且在不同的元素下是样式不一样，则不能去掉，比如你css文件中定义如下：

p.red{color:red;}  
span.red{color:#ff00ff} 

如果是这样定义的就不要去掉，去掉后就会混淆，不过建议最好不要这样写。

◆尽量少使用层级关系
一般写法：#divBox p .red{color:red;}
更好写法：.red{..}

◆使用class代替层级关系
一般写法：#divBox ul li a{display:block;}
更好写法：.block{display:block;}

---

参考文章：
1.http://www.cnblogs.com/wangfupeng1988/p/4285251.html
2.http://www.cnblogs.com/iloveyoucc/archive/2012/09/06/2673003.html

[hbl045]

css的优先级，还有另外的判定。在css的计算规则中，不仅关注元素的继承、元素声明的特殊性和元素本身来源。这些都是会影响一个css的优先级的判断。并不是说id选择器就一定是最优先，可能还有其他更高级的排序。
详情在下面的网站可以观看
https://www.cnblogs.com/wangmeijian/p/4207433.html

[AnsonZnl]

就像楼上兄弟说的，优先级计算中受到影响的因素很多，常用的来说就是：

!important>id>class>tag>*

[tzjoke]

楼主这篇貌似重复了。。

[Vi-jay]

!important>内联>id>class>tag>通配符

[Konata9]

!important > 内联样式（1000） > id 选择器（100） > class 选择器（10） > tag（1） > *

当有多个选择器在一起时，权重相加计算。

对于 CSS 选择器的写法不建议超过 3 层。

[blueRoach]

!important > 内联样式 > ID > CLASS > element > *

[MrZ2019]

!important>id>class>tag>*

[amikly]

!important > ID选择器 > 类选择器，属性选择器，伪类 > 类型选择器，伪元素

[Iambecauseyouare]

!import > 内联 > id > class > tag > * >继承样式

[never123450]

CSS的优先级是通过计算选择器的特定权重来确定的。当多个规则应用于同一个元素时，CSS会根据选择器的优先级来确定应用哪个规则。

以下是CSS优先级的计算规则，按照从高到低的顺序：

0.!important

1. 内联样式（Inline Styles）：通过 style 属性直接应用于元素的样式具有最高的优先级。例如： <div style="color: red;">Hello</div>

2. ID选择器（ID Selectors）：通过元素的ID选择器来应用样式。例如： #myElement { color: blue; }

3. 类选择器、属性选择器和伪类选择器（Class Selectors, Attribute Selectors, Pseudo-class Selectors）：通过类名、属性或伪类来应用样式。例如： .myClass { color: green; } 、 [type="text"] { background-color: yellow; } 、 :hover { font-weight: bold; }

4. 元素选择器和伪元素选择器（Element Selectors, Pseudo-element Selectors）：通过元素名或伪元素来应用样式。例如： div { font-size: 16px; } 、 ::before { content: "Before"; }

5. 通用选择器、子选择器和相邻选择器（Universal Selectors, Child Selectors, Adjacent Selectors）：这些选择器的权重较低。例如： * { margin: 0; } 、 div > p { color: gray; } 、 h2 + p { font-style: italic; }

如果多个规则具有相同的优先级，则后面出现的规则将覆盖前面的规则。

需要注意的是，内联样式的优先级最高，但是它的作用范围仅限于单个元素。如果多个选择器应用于同一个元素，则根据权重来决定哪个样式将被应用。

[never123450]

CSS的优先级是通过计算选择器的特定权重来确定的。当多个规则应用于同一个元素时，CSS会根据选择器的优先级来确定应用哪个规则。

以下是CSS优先级的计算规则，按照从高到低的顺序：

0.!important

1. 内联样式（Inline Styles）：通过 style 属性直接应用于元素的样式具有最高的优先级。例如： <div style="color: red;">Hello</div>

2. ID选择器（ID Selectors）：通过元素的ID选择器来应用样式。例如： #myElement { color: blue; }

3. 类选择器、属性选择器和伪类选择器（Class Selectors, Attribute Selectors, Pseudo-class Selectors）：通过类名、属性或伪类来应用样式。例如： .myClass { color: green; } 、 [type="text"] { background-color: yellow; } 、 :hover { font-weight: bold; }

4. 元素选择器和伪元素选择器（Element Selectors, Pseudo-element Selectors）：通过元素名或伪元素来应用样式。例如： div { font-size: 16px; } 、 ::before { content: "Before"; }

5. 通用选择器、子选择器和相邻选择器（Universal Selectors, Child Selectors, Adjacent Selectors）：这些选择器的权重较低。例如： * { margin: 0; } 、 div > p { color: gray; } 、 h2 + p { font-style: italic; }

如果多个规则具有相同的优先级，则后面出现的规则将覆盖前面的规则。

需要注意的是，内联样式的优先级最高，但是它的作用范围仅限于单个元素。如果多个选择器应用于同一个元素，则根据权重来决定哪个样式将被应用。