精华内容
下载资源
问答
  • 优先级计算

    2017-07-17 13:30:34
    优先级计算 优先级数值比较:以数值大的为准 style=1000 id=100 class=10 element=1 所以有:ID>CLASS>元素>* important>内联>ID>类>标签|伪类|属性选择器>伪元素>继承>通配符
    优先级计算


    优先级数值比较:以数值大的为准  
    style=1000
    id=100
    class=10
    element=1




    所以有:ID>CLASS>元素>*
    important>内联>ID>类>标签|伪类|属性选择器>伪元素>继承>通配符
    展开全文
  • CSS优先级计算的规则

    2020-09-24 20:16:59
    主要介绍了CSS优先级计算的规则,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • css优先级计算规则

    2019-10-05 17:23:35
    最近面试了一些求职者,我问css优先级计算规则是怎样的?答曰ID优先级>class>元素选择器,外联样式优先级低于内联样式,内联样式优先级低于行间样式,然后就没有然后了……,ID选择器的优先级确实>class...

        最近面试了一些求职者,我问css优先级计算规则是怎样的?答曰ID优先级>class>元素选择器,外联样式优先级低于内联样式,内联样式优先级低于行间样式,然后就没有然后了……,ID选择器的优先级确实>class选择器的优先级>元素选择器的优先级,但是外联样式优先级并不一定低于内联样式优先级。做为一个合格的前端工程师,让我们彻底搞清楚css优先级计算规则吧!

        特殊性

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

    上面这句话有两个词需要稍作解释,“声明”和“特殊性”。如下图,css规则由选择器和声明块组成,写在选择器后面大括号里的就叫声明。

        实际上,同一个元素可以使用多个规则来指定它的字体颜色,每个规则都有自己的选择器。显然最终只有一个规则起作用(不可能一个字既是红色又是绿色),那么该规则的特殊性最高,特殊性即css优先级。很多同学仅仅知道选择器优先级ID>class>元素选择器,而不知道ID的优先级为什么大于class的优先级。那么css优先级到底是怎么计算的呢?

        选择器的特殊性值表述为4个部分,用0,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 a{color: yellow;} /*特殊性值:0,0,0,1*/
    2 div a{color: green;} /*特殊性值:0,0,0,2*/
    3 .demo a{color: black;} /*特殊性值:0,0,1,1*/
    4 .demo input[type="text"]{color: blue;} /*特殊性值:0,0,2,1*/
    5 .demo *[type="text"]{color: grey;} /*特殊性值:0,0,2,0*/
    6 #demo a{color: orange;} /*特殊性值:0,1,0,1*/
    7 div#demo a{color: red;} /*特殊性值:0,1,0,2*/

     对照下面的demo,来验证上面几组规则的正确与否:

    <a href="">第一条应该是黄色</a> <!--适用第1行规则-->
    <div class="demo">
        <input type="text" value="第二条应该是蓝色" /><!--适用第4、5行规则,第4行优先级高-->
        <a href="">第三条应该是黑色</a><!--适用第2、3行规则,第3行优先级高-->
    </div>
    <div id="demo">
        <a href="">第四条应该是红色</a><!--适用第6、7行规则,第7行优先级高-->
    </div>

    显示效果:

        分析上面的demo,要注意特殊性是怎么排序的,上面第4行和第5行规则,第4行之所以优先级比第5行高,是因为第四行特殊性值最后面是1,而第5行特殊性值最后面是0。回过头来回答文章最开始的问题,为什么ID选择器的优先级比类选择器的优先级高?实际上是因为选择器特殊性值是从左向右排序的,特殊性值1,0,0,0大于以0开头的所有特殊性值,即便它是0,99,99,99,优先级依然比1,0,0,0要低。

        前面有讲到通配选择器*的特殊性值是0,0,0,0,而元素通过父元素继承过来的样式是没有特殊性值的,所以,通配选择器定义的规则优先级高于元素继承过来的规则的优先级

        细心的同学应该已经发现了,特殊性值中的4个0中的第一个0是给谁暗箱操作内定了吗?是的!DOM中的行间样式送了点红包,于是它就牛了。行间样式的特殊性是1,0,0,0。行间样式的优先级比ID选择器优先级高。

     

        层叠

        假如特殊性相同的两条规则应用到同一个元素会怎样?css会先查看规则的权重(!important),加了权重的优先级最高,当权重相同的时候,会比较规则的特殊性,根据前面的优先级计算规则决定哪条规则起作用,当特殊性值也一样的时候,css规则会按顺序排序,后声明的规则优先级高,成为人生赢家,当上总经理出任CEO迎娶白富美。

        我们知道a标签有四种状态:链接访问前、链接访问后、鼠标滑过、激活,分别对应四种伪类:link、:visited、:hover、:active,并且这四个伪类如果对同一个元素设置同一个属性,那它们的声明顺序还有一定要求,一般大家都遵循“爱恨原则LVHA”(LoVe HAte),为什么是这个顺序?不能是其它顺序吗?

        根据css优先级计算规则,伪类的特殊性值是0,0,1,0,4个伪类的特殊性值相同,那么后面声明的规则优先级高。当鼠标滑过a链接时,满足:link和:hover两个伪类,要改变a标签的颜色,就必须将:hover伪类在:link伪类后面声明;同理,当鼠标点击激活a链接时,同时满足:link、:hover、:active三种状态,要显示a标签激活时的样式(:active),必须将:active声明放到:link和:hover之后。因此得出LVHA这个顺序。这个顺序能不能变?可以,但也只有:link和:visited可以交换位置,因为一个链接要么访问过要么没访问过,不可能同时满足,也就不存在覆盖的问题。

    ###########2017-5-8补充############

    有意思的是,如果某个元素class(类选择器)的数量大于255个,不同的浏览器的表现不一致,包括但不限于以下浏览器认为class选择器的优先级会超过id选择器:

    Firefox 52.0.2 (64 位)
    
    IE 11

     

    ###########################

    本文地址:http://www.cnblogs.com/wangmeijian/p/4207433.html

    By 王美建 from 博客园 原创文章,转载请保留署名及出处 

    转载于:https://www.cnblogs.com/wangmeijian/p/4207433.html

    展开全文
  • 下面小编就为大家带来一篇css优先级计算方法(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • CSS优先级计算规则

    2020-09-15 16:49:32
    CSS优先级计算规则 CSS的优先级可以分为引入优先级和声明优先级 引入优先级 CSS按照引入方式的不同可以分为:内联样式、外部样式和内部样式 内联样式:直接写在html标签内部的css样式 外部样式:使用link引入的外部...

    CSS优先级计算规则

    CSS的优先级可以分为引入优先级声明优先级

    引入优先级

    CSS按照引入方式的不同可以分为:内联样式外部样式内部样式

    内联样式:直接写在html标签内部的css样式

    外部样式:使用link引入的外部css样式

    内部样式:在style标签内部书写的css样式

    优先级为:

    内联样式 > 外部样式 = 内部样式

    声明优先级

    CSS的声明优先级根据声明样式的特殊性值判断:

    选择器 优先级
    内联选择器(行内样式) x, 0, 0, 0
    ID选择器 0, x, 0, 0
    class选择器/属性选择器/伪类 0, 0, x, 0
    元素选择器 0, 0, 0, x

    计算方法:

    (1)每个等级的初始值为0

    (2)每个等级的叠加为选择器出现的次数相加

    (3)不可进位,比如0,99,99,99

    (4)依次表示为:0,0,0,0

    (5)每个等级计数之间没关联

    (6)等级判断从左向右,如果某一位数值相同,则判断下一位数值

    (7)如果两个优先级相同,则最后出现的优先级高,!important也适用

    (8)通配符选择器的特殊性值为:0,0,0,0

    (9)继承样式优先级最低,通配符样式优先级高于继承样式

    (10)!important(权重),它没有特殊性值,但它的优先级是最高的,为了方便记忆,可以认为它的特殊性值为1,0,0,0,0。

    计算示例:

    #demo a{color: orange;}/*特殊性值:0,1,0,1*/
    
    div #demo a{color: red;}/*特殊性值:0,1,0,2*/
    
    展开全文
  • 选择器优先级计算

    2020-03-23 10:08:48
    选择器优先级由高到低顺序如下: (1).内联样式。 (2).id选择器。 ...(3)....(5)....如果选择器的优先级相同,CSS代码中...优先级计算规则: (1).id选择器权重等级:0,1,0,0。 (2).类、属性[type=“text”...

    选择器优先级由高到低顺序如下:

    • (1).内联样式。

    • (2).id选择器。

    • (3).类选择器、属性选择器与伪类选择器。

    • (4).*通配符选择器。

    • (5).从父辈元素继承而来的样式。

    如果选择器的优先级相同,CSS代码中,靠后的CSS规则优先级高于前面的规则。


    优先级计算规则:

    • (1).id选择器权重等级:0,1,0,0。

    • (2).类、属性[type=“text”]或伪类选择器权重等级:0,0,1,0。

    • (3).元素和伪元素选择器权重等级:0,0,0,1。

    • (4).*通配符选择器权重等级:0,0,0,0。

    • not伪类不参与权重计算.

    首先比较最高等级,如果打个平手,那么再比较次一等级,以此类推。 如果选择器等级权重相同,那么后来者居上,也就是后面声明的属性会覆盖前面的。

    在这里插入图片描述

    a{color : yellow; }//元素选择器
    div a{color : green; }  //两个元素选择器
    .demo a{ color : black; } //类选择器+元素选择器
    .demo input[type="text"]{ color : blue;}  //类选择器+属性选择器+元素选择器
    .demo *[type="text"]{ color:grey;} //类选择器+通配符选择器+属性选择器
    #demo a{ color : orange;} //id选择器+元素选择器
    div #demo a{color : red;}// 元素选择器+id选择器+元素选择器
    
    展开全文
  • CSS选择器优先级计算

    千次阅读 2016-04-29 20:14:20
    CSS选择器优先级计算
  • CSS优先级计算

    2013-10-28 11:30:37
    优先级计算  当对HTML中的同一个元素有多个选择器时,就涉及到了规则的优先级问题,规则的优先级是根据对应的选择器的优先级来的,选择器有6中优先级,从小到大排列: 通用选择器(universal selector),用...
  • CSS样式优先级计算

    2015-05-15 09:55:56
    CSS的样式优先级计算是一个四位数,而在css2中是一个3位数。 首先,使用!important来定义样式是优先于其他所有样式的 其次,该四位数选择,第一位为内联样式,及行内样式;第二位为id选择器,第三位为class选择器...
  • 最近学习CSS的小白们想必要被...今天我们来聊一聊传说中的优先级计算法则——CSS权重。 什么是CSS权重? 权重就是Css选择器的优先级问题,在Css中,一般都是”id选择器 > 标签选择器 >……>……”,这叫做
  • 原则一: 继承不如指定 ...CSS优先级权重计算法 CSS优先级包含四个级别(标签内选择符,ID选择符,Class选择符,元素选择符)以及各级别出现的次数! 根据这四个级别出现的次数计算得到CSS的优先级。 CSS
  • css优先级计算

    2019-09-28 01:34:35
    主要的css选择器有id,class,tag,[],:,::等,而通常需要对其优先级进行判断的有id,class,tag,另外内联样式和!important也和css的优先级有关系。 如果将这五种不同情况的优先级以数字的形式来表示的话,其对应关系...
  • CSS 优先级计算方法

    2020-11-16 17:09:12
    到具体的计算层⾯,优先级是由A、B、C、D的值来决定的,其中它们的值计算规则如下: (有些并不是选择器,但为了更好地说明问题,暂且将其列入) 选择器 权重计算公式 {A,B,C,D} 继承 或 *{} {0,0,0,0} 每...
  • 原则一: 继承不如指定原则二: #id > .class > 标签选择符原则三:越具体越强大原则四:标签#id >#id ; 标签.class > .class CSS优先级权重计算法 CSS优先级包含四个级别...CSS优先级计算规则如下...
  • css样式的优先级分为引入优先级和声明优先级。 引入优先级 引入样式一般分为外部样式,内部样式,内联样式。 外部样式:使用link引入的外部css文件。 内部样式:使用style标签书写的css样式。 内联样式:直接书写在...
  • css样式的优先级分为引入优先级和声明优先级。引入优先级引入样式一般分为外部样式,内部样式,内联样式。外部样式:使用link引入的外部css文件。内部样式:使用style标签书写的css样式。内联样式:直接书写在html...
  • css优先级计算方法

    2018-09-05 16:50:48
    2、计算: * css继承是从一个元素向其后代元素传递属性值所采用的机制。确定应当向一个元素应用哪些值时,浏览器不仅要考虑继承,还要考虑声明的特殊性,另外需要考虑声明本身的来源。这个过程就称为层叠。 ——...
  • CSS3的优先级计算

    2020-09-08 16:16:31
    优先级就近原则,同权重情况下样式定义最近者为准; 载入样式以最后载入的定位为准; 优先级为: 1. 同权重: 内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)。 2. important 比 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,285
精华内容 2,914
关键字:

优先级计算