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

最新推荐文章于 2024-10-11 10:57:15 发布

leo_qiu_s

最新推荐文章于 2024-10-11 10:57:15 发布

阅读量565

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qiudechao1/article/details/103677563

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

标签：

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

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{...} 权值0100
　　2、class　　.class{...} 权值0010
　　3、标签　　p{...} 权值0001
　　4、通用　　*{...} 权值0000
　　5、属性　　[type="text"]{...} 权值0010
　　6、伪类　　：hover{...} 权值0010
　　7、伪元素　　::first-line{...}，:after{...} 权值0001
　　8、子选择器、相邻选择器权值0000

三、权重计算规则
如下千级权值、百级权值……是自己发明的词，非官网，好理解而已。
  特级：!important（权重），优先级是最高，没有特殊性值，为了方便记忆，可以认为它的特殊性值为1,0,0,0,0。
    第一等(千级权值)：代表内联样式，如: style=””，权值为:1000。
    第二等(百级权值)：代表 ID选择器，如：#content，权值为:0100。
    第三等(十级权值)：代表类，伪类和属性选择器，如: .content , :hover , [type="text"] 权值为:0010。
    第四等(个级权值)：代表标签选择器和伪元素选择器，如: p ，::first-line 权值为:0001。
    零级权值：通配符、子选择器、相邻选择器等的。如: *、>、+，权值为:0000。
继承权值：-1，继承的样式没有权值，通配符、子选择器、相邻选择器等优先级高于元素继承的优先级，可以理解为继承的权值是-1。继承样式的元素就是没人管的孩子，他们就近找一户人家罢了。

<style type="text/css">
	.panel_list li{font-size: 20px !important;}
	div{font-size: 12px;}
</style>
...
<ul class="panel_list">
    <li> <div class="mytitle">样式测试</div> </li>
</ul>

.panel_list li{font-size: 20px !important;} 虽然权值很高，但对于div元素来说，只是一个继承样式，所以权值是最低的-1，

设计思想就是要让继承的样式被明确指定的样式覆盖。

补充：CSS的继承是指被包在内部的标签将拥有外部标签的样式性质，它是依赖于祖先-后代的关系的。
多数边框类属性，比如象Padding（补白），Margin（边界），背景和边框的属性都是不能继承的。表格也不能继承父亲的样式。

css选择器权重列表如下：

权重	选择器
10000	`!important`（!important并不是选择器，但是权重却是最高的）
1000	内联样式：`style=""`
100	ID选择器： `#idName{...}`
10	类、伪类、属性选择器：`.className{...}` / `:hover{...}` / `[type="text"] ={...}`
1	标签、伪元素选择器：`div{...}` / `:after{...}`
0	通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）

例如：以下规则中选择器的权值分别是：

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

变态情况：鑫大神的例子256个class类名选择器干掉一个id选择器实例页面--->亲自试验没有干掉……
http://www.zhangxinxu.com/study/201208/256-class-fire-an-id.html
解释：
因为test元素是不存在的，因此，为了兼容IE6~8浏览器，需要在头部写上额外的一行JS代码：document.createElement("test");
chrome 没有此现象，FireFox有此现象，因为在FireFox的源代码中，所有的类名(classes)都是以8字节字符串存储的，8字节所能存储的最大值是255，当出现256个class时候，存储的数字会进位，从而超过id权值。

这其实是一个小BUG，有些浏览器厂商已经开始修复。

四、比较规则
    0-100-0-0 > 0-0-110-0。也就是说从左往右逐个等级比较，前一等级相等才往后比。
   百级权值跟百级权值比较，十级权值跟十级权值比较……十级权值不能进位到百级权值，
   #demo{color: orange;}的权值：100-0-1，意思是百级权值是100，十级权值是0，个级权值是1，
   .c1.c2.c3.c4.c5.c6.c7.c8.c9.c10.c11{color: red;}的权值：0-110-0，最后结果是#demo{color: orange;}生效。

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

五、实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS选择器的权重与优先规则?</title>
<style>
a{color: yellow;} /*1*/
div a{color: green;} /*2*/
.demo a{color: black;} /*10-1*/
.demo a[title]{color: blue;} /*20-1*/
.demo *[title]{color: grey;} /*20*/
#demo a{color: orange;} /*100-0-1*/
div#demo a{color: red;} /*100-0-2*/
</style>
</head>
<body>

<a href="">第一条应该是黄色</a> <!--适用第1行规则-->
<div><a href="">第二条应该是绿色</a></div>
<div class="demo">
    <a href="">第三条应该是黑色</a><br/><!--适用第1、2、3行规则，第3行优先级高-->
    <a href="" title="#">第四条应该是蓝色</a><br/><!--适用第4、5行规则，第4行优先级高-->
    <p title="#">第五条应该是灰色</p><!--适用第4、5行规则，第5行适用-->
</div>
<div id="demo">
    <a href="">第七条应该是红色</a><!--适用第6、7行规则，第7行优先级高-->
</div>

</body>
</html>

显示：

另外参考：https://blog.csdn.net/qq_41761591/article/details/97547284，权值的计算更到位。

细说继承特性

1、就近继承原则
strong分别从body和p中继承了color属性，但是由于p在继承树上离strong更近，因此strong中的文字最终继承p的蓝色。

<style type="text/css">
    body {color:black;}
    p {color:blue;}
</style>
...
<body> 
    <p>welcome to <strong>我的博客</strong></p>
</body>

2、直接指定样式优先
继承的样式没有权值，通配符、子选择器、相邻选择器等优先级高于元素继承的优先级，可以理解为继承的权值是-1。
继承的样式会被明确指定的样式覆盖。

<ul class="panel_list">
    <li>
        <div class="mytitle">字体测试</div>
    </li>
</ul>

内部样式

<style type="text/css">
	.panel_list li{font-size: 20px;}
	div{font-size: 12px;}
</style>

看起来 .panel_list li{font-size: 20px;} 权值是0-10-1，但是div是继承此样式，所以对于div来说，此样式权值是继承权值-1，
而 div{font-size: 12px;} 权值是0-0-1，此样式生效。

修改为

<style type="text/css">
	.panel_list li>div{font-size: 20px;}
	div{font-size: 12px;}
</style>

此时对于div来说，
.panel_list li>div{font-size: 20px;} 权值是：0-10-2，
div{font-size: 12px;}权值是：0-0-1，
所以 .panel_list li>div{font-size: 20px;} 生效。

国外有人制作了一个很通俗易懂的，大鱼吃小鱼，小鱼吃小虾的CSS选择器类型与权重关系图：

leo_qiu_s

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录