CSS选择器的权重与优先规则？

首页 > 代码库 > CSS选择器的权重与优先规则？

CSS选择器的权重与优先规则？

2024-08-10 21:55:24 220人阅读

我们做项目的时候，经常遇到样式层叠问题，被其他的样式覆盖，或者写的权重不高没效果，对权重没有具体的分析，做了一个总结。

css继承是从一个元素向其后代元素传递属性值所采用的机制。确定应当向一个元素应用哪些值时，浏览器不仅要考虑继承，还要考虑声明的特殊性，另外需要考虑声明本身的来源。这个过程就称为层叠。——《css权威指南》

如下图，css规则由选择器和声明块组成，写在选择器后面大括号里的就叫声明。

技术分享

一、样式类型
1、行间

 <h1 style="font-size:12px;color:#000;">我的行间CSS样式。</h1>

2、内联

<style type="text/css">   h1{font-size:12px; color:#000;}</style>

3、外部

<link rel="stylesheet" href="css/style.css">

例子汇总html：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>CSS选择器的权重与优先规则?</title><style>.demo{    width:1000px;    border:1px solid #eee;    margin:0 auto;}a {color:red;}</style><link rel="stylesheet" rev="stylesheet" href="css/style1.css" type="text/css" /><link rel="stylesheet" rev="stylesheet" href="css/style2.css" type="text/css" /></head><body><div class="demo">    <a href="#" style="color:yellow;">11111111</a></div></body></html>

style1.css

a {color:blue;}

style2.css

a {color:green;}

不同情况说明：一种四种情况都设置了a的样式，看看优先级情况；

1.当只有2个外联样式时：style2.css > style1.css

显示绿色：技术分享

说明样式相同情况下，样式表是从上向下执行的。

2.当有外部和内联情况下

显示绿色：技术分享

说明内联和外面，样式相同情况下，样式表是从上向下执行的。

注意：经常有错觉，内联大于外部，那是我们内部经常加到外部下面，覆盖掉了外部的。

3.当有外部，内联，行间时：

显示：黄色技术分享

说明：行间权重最高。

二、选择器类型
　　1、ID　　#id
　　2、class　　.class
　　3、标签　　p
　　4、通用　　*
　　5、属性　　[type="text"]
　　6、伪类　　：hover
　　7、伪元素　　::first-line
　　8、子选择器、相邻选择器

三、权重计算规则
    第一等：代表内联样式，如: style=””，权值为:1000。
    第二等：代表 ID选择器，如：#content，权值为:0100。
    第三等：代表类，伪类和属性选择器，如: .content , :hover , [type="text"] 权值为:0010。
    第四等：代表标签选择器和伪元素选择器，如: p ，::first-line 权值为:0001。
    通配符、子选择器、相邻选择器等的。如: *、>、+,权值为:0000。
    继承的样式没有权值，通配选择器定义的规则优先级高于元素继承过来的规则的优先级。
   最后比较特殊的一个标志!important（权重），它没有特殊性值，但它的优先级是最高的，为了方便记忆，可以认为它的特殊性值为1,0,0,0,0。

例如：以下规则中选择器的特殊性分别是：

1  style="color: yellow;"                      /*特殊性：1000*/2  #demo a{color: orange;}                     /*特殊性：100+1=101*/3  div#demo a{color: red;}                     /*特殊性：1+100+1=102*/4  .demo a{color: black;}                      /*特殊性：10+1=11*/5  div a{color: green;}                        /*特殊性：1+1=2*/6  .demo input[type="text"]{color: blue;}      /*特殊性：10+1+10=21*/7  .demo *[type="text"]{color: grey;}          /*特殊性：10+0+10=20*/

变态情况：鑫大神的例子256个class类名选择器干掉一个id选择器实例页面

http://www.zhangxinxu.com/study/201208/256-class-fire-an-id.html

四、比较规则
    1,0,0,0 > 0,99,99,99。也就是说从左往右逐个等级比较，前一等级相等才往后比。
   无论是行间、内部和外部样式，都是按照这个规则来进行比较。而不是直观的行间>内部>外部样式；ID>class>元素。
    在权重相同的情况下，后面的样式会覆盖掉前面的样式。
    通配符、子选择器、相邻选择器等的。虽然权值为0000，但是也比继承的样式优先。