网赚妈妈

 找回密码
 立即注册
搜索
查看: 224|回复: 0

[网赚游戏] CSS中的选择器优先级权重比较

[复制链接]
  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

    发表于 2018-11-5 22:10:45 | 显示全部楼层 |阅读模式
    <style> a{ color: red; } #box a{ color: green; } [class="box"] a{ color: gold; } .box a{ color: purple; } p a{ color: yellow; } </style> <p id='box' class="box"> <a>hello</a></p>

    请问上面代码中,a标签中文字的最终颜色是什么?知道CSS选择器优先级规则的童鞋都知道,在CSS中优先级顺序如下:

    ID选择器 > class选择器 > tag选择器

    所以,上面代码的颜色,大家都会选择 #box a{ color: green;} 绿色。这个答案没错。 如果我们把这一条规则从style标签中移除呢,那么a标签文字的颜色应该是哪个?

    答案是: purple。

    a{color:red} 和 p a {color : yellow;}的优先级肯定没有其它两项高,不需要考虑。在 [class="box"] a和.box a中,后者的顺序比较考后,会覆盖之前的样式,所以颜色是purple。

    这也许会是一些人的答案,不能不说不对。那么如果这中情况下呢?

     <style> #box{ color: green; } </style> <p id='box' class="box" style="color: red;"> hello </p>

    不用说,大家都知道会使用style="color: red;"属性定义的颜色,是red。

    那么,css所遵从的具体规则是什么呢?

    权重计算规则

    • 第零等:!important, 大过了其它任何设置。
    • 第一等:代表内联样式,如: style=””,权值为1000。
    • 第二等:代表ID选择器,如:#content,权值为0100。
    • 第三等:代表类,伪类和属性选择器,如.content,权值为0010。
    • 第四等:代表类型选择器和伪元素选择器,如div p,权值为0001。
    • 第五等:通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
    • 第六等:继承的样式没有权值。

    计算规则

    !important 和内联样式style都属于不讲理的那种,

    只要存在 !important,!important便具有最高优先级;

    如果不存在 !important,存在style,那么style便具有最高优先级;

    回复

    使用道具 举报

    xml|2.xml|QQ3014497968|文章发布|签到|小黑屋|网赚论坛-致富项目网络赚钱平台 |网站地图

    GMT+8, 2019-10-24 06:53 , Processed in 0.150889 second(s), 14 queries , File On.

    Powered by Discuz! X3.3

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表