Tuuu Nya's Blog

CSS选择器优先级

字数统计: 273阅读时长: 1 min
2016/04/01 Share

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

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

问题

有如下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

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

原文作者:Tuuu Nya

原文链接:http://www.hackersb.cn/study/115.html

发表日期:April 1st 2016, 1:40:00 am

更新日期:May 15th 2019, 4:31:49 pm

版权声明:本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. 问题
  2. 2. 原理
  3. 3. 特例