CSS接纳器的权重与先行法规,css接受器优先级高低排列_css样式权重计算和

作者:亚搏app官网    发布时间:2020-02-09 19:41    浏览:59 次

[返回]

时间: 2018-01-23阅读: 6937标签: 伪类首先我们需要知道选择器的类型有这些:

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

选择器

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

栗子

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

ID#idclass.class标签p属性[type='text']伪类:hover伪元素::first-line相邻选择器、子代选择器+

图片 1

而这些css的选择器是有权重(即优先级)的,在不同选择器的样式出现冲突时候,会采用权重高的选择器设置样式,而优先级不仅仅只是:“行间内部外部、IDclass元素”。css优先级到底是怎么计算的呢?

一、样式类型
1、行间

选择器的特殊性值表述为4个部分,用0,0,0,0表示,权重计算规则如下:行间样式,加1,0,0,0.ID选择器的特殊性值,加0,1,0,0。类选择器、属性选择器或伪类,加0,0,1,0。元素和伪元素,加0,0,0,1。通配选择器*对特殊性没有贡献,即0,0,0,0。最后比较特殊的一个标志!important(权重),它没有特殊性值,但它的优先级是最高的,为了方便记忆,可以认为它的特殊性值为1,0,0,0,0。特殊性值是如何进行比较的呢?比较规则如下:1,0,0,0 0,99,99,99。也就是说从左往右逐个等级比较,前一等级相等才往后比。无论是行间、内部和外部样式,都是按照这个规则来进行比较。而不是直观的行间内部外部样式;IDclass元素。之所以有这样的错觉,是因为确实行间为第一等的权重,所以它的权重是最高的。而内部样式可能一般写在了外部样式引用了之后,所以覆盖掉了之前的。在权重相同的情况下,后面的样式会覆盖掉前面的样式。通配符、子选择器、相邻选择器等的。虽然权值为0000,但是也比继承的样式优先,0 权值比无权值优先。!important属性:

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

我们知道带有!important的属性样式优先级是最高的,但是ie6中会出现如下的bug:

2、内联

p{ color:red !important; color:blue; //会显示blue}
<style type="text/css">
   h1{font-size:12px; color:#000;}
</style>

但是这样就会显示的是red。说明ie6还是支持important的

3、外部

p{color:red !important; }p{color:blue;}
<link rel="stylesheet" href="css/style.css">

在使用 !important 时需要注意:一定要优化考虑使用样式规则的优先级来解决问题而不是 !important只有在需要覆盖全站或外部 css(例如引用的 ExtJs 或者 YUI )的特定页面中使用 !important永远不要在全站范围的 css 上使用!important永远不要在你的插件中使用 !important

例子汇总html:

来自:MDN中例外的 !important 规则

<!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>

怎样覆盖掉 !important:

style1.css

很简单,你只需要再加一条!important 的CSS语句,将其应用到更高优先级的选择器(在原有基础上添加额外的标签、class或id选择器)上;或是保持选择器一样,但添加的位置需要在原有声明的后面(优先级相同的情况下,后边定义的会覆盖前边定义的)。

a {color:blue;}
#test.a{ color: red !important; !--尽管这条声明在前,但是仍会覆盖下边的样式-- } a{ color: blue !important; }

style2.css

或者,同样的选择器,后边的声明会覆盖前边的:

a {color:green;}
a{ color: red !important; } a{ color: blue !important; !--显示blue-- }

不同情况说明:一种四种情况都设置了a的样式,看看优先级情况;

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

显示绿色:图片 2  

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

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

显示绿色:图片 3  

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

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

3.当有外部,内联,行间时:

显示:黄色图片 4  

说明:行间权重最高。

 

二、选择器类型
  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选择器实例页面

四、比较规则
    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>

显示:

图片 5

形象的展示:

图片 6

搜索