CSS选择器优先级

admin 2022年5月17日03:42:22评论33 views字数 485阅读1分37秒阅读模式

CSS选择器优先级

2016-03-31


前段时间搬家了 然后隔壁搬来了一个前端妹纸,

然而跟着妹纸学到了很多知识,比如:本文,嘿嘿嘿你懂得~

问题

有如下html代码:

        ALink

如果设置css样式:

#b a{
    color:red;
}
#a{
    
    color: green;
}

问题:#b a生效,还是#a生效~

然而我的回答是:#a

但是结果是:

2966578506

呵呵

原理

以下全部是我家隔壁那个亲爱的可爱的萌萌哒的前端妹纸科普的知识,

css的选择器优先级分别为:

  • 标签选择器:1
  • 类选择器:10
  • ID选择器:100

现在来解释上面为何打脸了,

因为#b a中选择器权重一共是101,而#a的权重为100#b a生效。

特例

如果我们给#a的css后加上!important

那么#a的优先级变为最高,甚至比在html标签上加style的优先级还要高。

比如如下代码:




​ CSS Test

#a{

            color: green !important;
        }




​ ALink


显示的结果是加了!important设置的颜色

1914603397

感谢我家隔壁的前端妹纸,给我科普前端知识~

FROM : hackersb | Author:王松

  • 左青龙
  • 微信扫一扫
  • weinxin
  • 右白虎
  • 微信扫一扫
  • weinxin
admin
  • 本文由 发表于 2022年5月17日03:42:22
  • 转载请保留本文链接(CN-SEC中文网:感谢原作者辛苦付出):
                   CSS选择器优先级https://cn-sec.com/archives/1012865.html

发表评论

匿名网友 填写信息