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

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

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

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,但是也比继承的样式优先。

五、实例

<!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;} /*11*/.demo a[title]{color: blue;} /*21*/.demo *[title]{color: grey;} /*20*/#demo a{color: orange;} /*101*/div#demo a{color: red;} /*102*/</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>

显示:

技术分享

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