CSS:权重和层叠规则决定了其优先级

深碍√TFBOYSˉ_ 2022-08-13 11:42 203阅读 0赞

来源：[http://www.ido321.com/1063.html][http_www.ido321.com_1063.html]

首先，给大家看一篇关于CSS优先级的示例：[http://www.ido321.com/76.html][http_www.ido321.com_76.html]

**一、基本的优先级规则**

比较同一级别的个数，数量多的优先级高，如果相同即比较下一级别的个数，至于各级别的优先级如下：

**important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 >  通配符 > 继承**

**二、CSS权重规则**

**      ** 在《页面重构中的模块化设计》中提到，影响CSS样式权重，有两个重要因素：

A：样式的优先级跟样式定义的顺序有关

B：权值的大小跟选择器的类型和数量有关

一般来说，在同一个CSS文件中，如果有两个同名的样式，则后定义的会覆盖先定义的。选择器类型的优先级见(一)。

那么，CSS的权重是怎么算的呢？

一个selector的权重表示方式：0.0.0.0，按照计算规则给每位填充数字，对应位置相等，则比较下一位。

权重的计算规则如下：（为方便，用A.B.C.D代替各位置的值）

1、内嵌样式：A=1，B=C=D=0（即1.0.0.0）

2、ID样式：selector中带几个ID,第2位就加几个1 如\#header\{color:red\}，就是A=C=D=0,B=1(即0.1.0.0)

3、类,伪类,以及属性的个数就是第三位的值：

.a.b\[type="text"\]:hover\{\}，选择器中有2个类,1个属性,1个伪类,所以它的第3位为4, A=B=D=0,C=4,(即0.0.4.0)

4、伪元素和标签元素的个数就是第四位的值

p:first-letter，有一个标签元素p和伪元素first-letter,值为2,A=B=C=0,D=2（即0.0.0.2）

5、通配符和继承得到的CSS属性对权重没有影响

**三、几个示例**

针对以上，看以下几个示例

1、.a .b .c \{color:red;\}   //0.0.3.0   说明：只有三个类

2、`*`\{…\}         //0.0.0.0    说明：通配符对权重没有影响

3、.a .b a \{color:green\} //0.0.2.1     说明：两个类和一个标签

4、\#hid \{color:black;\}   //0.1.0.0  说明：只有一个ID

下一篇：[HTML 5 History API的”前生今世”][HTML 5 History API]

[  
][http_www.ido321.com_1063.html]

[http_www.ido321.com_1063.html]: http://www.ido321.com/1063.html
[http_www.ido321.com_76.html]: http://www.ido321.com/76.html
[HTML 5 History API]: http://www.ido321.com/1069.html

发表评论取消回复

表情：

评论列表（有 0 条评论，203人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS三大特性（层叠性、继承性、优先级）重点介绍权重

CSS三大特性（层叠性、继承性、优先级）重点介绍权重 * CSS三大特性 * * 1. 层叠性 * 2. 继承性（子承父业） * ...

「爱情、让人受尽委屈。」/ 2024年04月18日 09:24/ 0 赞/ 59 阅读

相关谈谈CSS选择器优先级和!important权重

![format_png][] 来源 | https://www.html.cn/web/css/19897.html CSS中的选择器优先级与!import

喜欢ヅ旅行/ 2022年12月22日 11:16/ 0 赞/ 137 阅读

相关 CSS的元素优先级和权重

<table> <thead> <tr> <th>继承和</th> <th>0.0.0.0</th> </tr> </thead> <t

た入场券/ 2022年12月01日 11:59/ 0 赞/ 196 阅读

相关 CSS三大特性——层叠性、继承性和优先级（权重的叠加）

CSS三大特性层叠性相同选择器给设置相同的样式，此时一个样式就会覆盖另一个冲突的样式。层叠性主要解决样式冲突的问题。层叠性原则：样式冲突，遵循就近原则，

港控/mmm°/ 2022年11月20日 08:17/ 0 赞/ 198 阅读

相关【CSS】css特殊性-优先级-权重

注：文章来源：《css权威指南》第三章。部分未予记录 css选择器可以用多种方式去选择元素，实际上一个元素可以由使用两个或者多个规则来匹配，每个规则都有各自的选择器。请看

古城微笑少年丶/ 2022年09月26日 14:54/ 0 赞/ 261 阅读

相关 CSS:权重和层叠规则决定了其优先级

来源：[http://www.ido321.com/1063.html][http_www.ido321.com_1063.html] 首先，给大家看一篇关于CSS

深碍√TFBOYSˉ_/ 2022年08月13日 11:42/ 0 赞/ 204 阅读

相关 CSS选择器,继承,层叠，权重

这节主要讲CSS选择器：最常用的有两种选择器：1 类型选择器（也称为元素选择器） p \{ color:black;\} 2 后代选择器（两者之间加空格）.firs

迈不过友情╰/ 2022年07月15日 04:56/ 0 赞/ 235 阅读

相关从 CSS 的权重规则看选择器及优先级

一、CSS权重规则 -------------------- CSS 的权重规则是学习 CSS 时非常重要的一个概念，每个选择器都有自己的权重。每条css规则，都包

一时失言乱红尘/ 2022年05月27日 05:43/ 0 赞/ 222 阅读

相关 css层叠的含义及css选择器权重

一、层叠指的是样式的优先级，当产生冲突时以优先级高的为准 1.内联样式>内部样式>外部样式(如果出现important标记，则important的优先级最高)

╰半橙微兮°/ 2022年04月01日 12:31/ 0 赞/ 260 阅读

相关 css 权重、权值（标签优先级）

css 权重、权值（标签优先级）！important 最高行内：1000 id:100 class:10 tag:1 \box>div\{\}=>

缺乏、安全感/ 2021年07月26日 02:48/ 0 赞/ 503 阅读