HTML+CSS3（八）——CSS权重

最新推荐文章于 2021-06-04 05:24:53 发布

C-A-L-D

最新推荐文章于 2021-06-04 05:24:53 发布

阅读量817

点赞数 1

分类专栏： Web前端-html+css3 文章标签： css

原文链接：https://blog.csdn.net/qq_41638795/article/details/79108799

版权

Web前端-html+css3 专栏收录该内容

17 篇文章 3 订阅

订阅专栏

HTML+CSS3（七）——display属性（前面文章已讲过，这里转载一篇）

HTML+CSS3（十）——CSS3新特性之2D变形和3D变形

HTML+CSS3（十二）——CSS常见问题

在给元素添加CSS规则（样式）时，发现并没有起到预期效果，主要原因是在某处定义了一个更高权重的规则，导致该处的规则并没有生效。因此，我们需要对CSS权重问题有一定了解。

CSS权重顺序

CSS样式优先级（就近原则）：
内联样式（标签内部）>嵌入样式（<head>中的style里）>外部样式（CSS文件中）

CSS各级别的优先级:
!important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 通配符 > 继承

!important

CSS2规范中规定：!important 用于单独指定某条样式中的单个属性。对于被指定的属性，有 !important 指定的权重值大于所有未用 !important 指定的规则。
例如:


 
 
   
   
    
    
   
   
   
   
    
    
     
     div{
     
     background:blue 
     
     !important}
    
    
   
   

   
   
    
    
   
   
   
   
    
     
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     div
     
     .box{ 
     
     background:pink}

结果效果显示背景颜色为blue
注意：当多条规则中都对同一个属性指定了 !important，!important 的作用相互抵销。

内联

写在标签内部：<标签 style=” ”></标签>


 
 
   
   
    
    
   
   
   
   
    
    
     
     <body>
    
    
   
   

   
   
    
    
   
   
   
   
    
    	
     
     <div style=”width:200px;height:200px”>
     
     </div>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     </body>


 
 
   
   
    
    
   
   
   
   
    
    
     
     <body>
    
    
   
   

   
   
    
    
   
   
   
   
    
    	
     
     <div id=”box”>
     
     </div>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     </body>

类


 
 
   
   
    
    
   
   
   
   
    
    
     
     <body>
    
    
   
   

   
   
    
    
   
   
   
   
    
    	
     
     <div class=”box”>
     
     </div>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     </body>

标签

div{width:200px}

伪类

伪类表示的是一种“状态”，如hover，active等等
常见的伪类选择器：（E代表元素）

E:link E:visited E:hover E:active
E:focus E:not(s) E:first-child E:last-child
E:only-child E:nth-child(n) E:nth-last-child(n) E:first-of-type
E:last-of-type E:only-of-type E:nth-of-type(n) E:nth-last-of-type(n)
E:empty E:checked E:enabled E:disabled

属性选择

E[attr]：选择具有att属性的E元素。
E[att="val"]：选择具有att属性且属性值等于val的E元素。
例子：


 
 
   
   
    
    
   
   
   
   
    
    
     
     <head>	
    
    
   
   

   
   
    
    
   
   
   
   
    
    	
     
     <style>
     
     
    
    
   
   

   
   
    
    
   
   
   
   
    
    	
     
     input
     
     [type] {  
     
     /*拥有type属性的input元素*/
    
    
   
   

   
   
    
    
   
   
   
   
    
    		
     
     color:red;
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     	}
    
    
   
   

   
   
    
    
   
   
   
   
    
    	
     
     input
     
     [type="text"] {  
     
     /*type属性值为text的input元素*/
    
    
   
   

   
   
    
    
   
   
   
   
    
    		
     
     border: 
     
     2px solid 
     
     #000;
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     	}
    
    
   
   

   
   
    
    
   
   
   
   
    
    	
     
     </style>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     </head>	
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <body>
    
    
   
   

   
   
    
    
   
   
   
   
    
    	
     
     <input />
    
    
   
   

   
   
    
    
   
   
   
   
    
    	
     
     <input type="text" />
    
    
   
   

   
   
    
    
   
   
   
   
    
    	
     
     <input type="submit" />
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     </body>

伪对象（伪元素）

伪元素表示文档的某个确定部分的表现，比如::first-line 伪元素只作用于你前面元素选择器确定的一个元素的第一行。
伪元素选择器只包含以下：
E:first-letter/E::first-letter
E:first-line/E::first-line
E:before/E::before
E:after/E::after
E::placeholder
E::selection
CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors)，但以前的写法(单冒号:)仍然有效。

通配符

*{}  /*选定所有对象。*/

继承

当一个元素的某个属性没有被直接指定时，才会继承父级元素的值。

选择器权重值的计算

A：如果规则是写在标签的style属性中（内联样式），则A=1，否则，A=0. 对于内联样式，由于没有选择器，所以B、C、D的值都为0，即A=1, B=0, C=0, D=0（简写为1,0,0,0，下同）。

B：计算该选择器中ID的数量。如果有则B=1，没有B=0（例如，#header 这样的选择器，计算为0, 1, 0, 0）。

C：计算该选择器中伪类及其它属性的数量（包括class、属性选择器等，不包括伪元素）。（例如， .logo[id='site-logo'] 这样的选择器，计算为0, 0, 2, 0）（后面将进一解释为什么会是0,0,2,0）。

D：计算该选择器中伪元素及标签的数量。（例如，p:first-letter 这样的选择器，计算为0, 0, 0, 2）。

从上选择器权重值的计算可以归结为：

1. 一条样式规则的整体权重值包含四个独立的部分：[A, B, C, D];
2. A 表示内联样式，只有 1 或者 0 两个值；
3. B 表示规则中 ID 的数量；
4. C 表示规则中除了 ID、标签和伪元素以外的其它选择器数量；
5. D 表示规则中标签和伪元素的数量；

CSS2规范中给出的一些例子：


 
 
   
   
    
    
   
   
   
   
    
    
     
     1.	*             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */  
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     2.	li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */  
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     3.	li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */  
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     4.	ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */  
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     5.	ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */  
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     6.	h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */  
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     7.	ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */  
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     8.	li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */  
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     9.	#x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */  
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     10.	style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

根据这样的定义，所以很多文章简单地把规则归纳为：内联样式的权重值是1000，ID选择器的权重值是100，class选择器的权重值是10，标签选择器的权重值是1. 整条规则中的所有选择器权重值相加得到整个样式规则的权重值，数字越大权重值越高。

大多数情况下，按照这样的理解得出的结论没有问题，但是遇到下面这样的情况就出现问题了：


 
 
   
   
    
    
   
   
   
   
    
    
     
     /* 样式一 */
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     body 
     
     header 
     
     div 
     
     nav 
     
     ul 
     
     li 
     
     div 
     
     p 
     
     a 
     
     span 
     
     em {
     
     color: red}
    
    
   
   

   
   
    
    
   
   
   
   
    
     
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     /* 样式二 */
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     .count {
     
     color: blue}

按照错误的计算方法，样式一的权重值是11，样式二的权重值是10，如果这两条规则用于同一个元素，则该元素应该是红色。实际结果却是蓝色。

原因如下：

根据规范，计算权重值时，A, B, C, D 四组值，从左到右，分组比较，如果 A 相同，比较 B, 如果 B 相同，比较 C, 如果 C 相同，比较 D, 如果 D 相同，也就是权重相同时，后定义的优先。

样式二和样式一的 A、B 相同，而样式二的 C 大于样式一，所以，不管 D 的值如何，样式二权重值都大于样式一，因此实际结果显示为蓝色。

C-A-L-D

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS3（八）——CSS权重

目录：HTML+CSS3（一）——认识浏览器HTML+CSS3（二）——HTML 初识HTML+CSS3（三）——HTML基本标签HTML+CSS3（四）——表单pattern正则属性HTML+CSS3（五）——CSS基础HTML+CSS3（六）——行内元素和块级元素HTML+CSS3（七）——display属性（前面文章已讲过，这里转载一篇） ...
复制链接

扫一扫