CSS选择器优先级

2016-03-31

#css

#css选择器

#css选择器优先级

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

然而跟着妹纸学到了很多知识，比如：本文，嘿嘿嘿你懂得～

问题

有如下html代码：

        ALink

如果设置css样式：

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

问题：#b a生效，还是#a生效～

然而我的回答是：#a

但是结果是：

呵呵

原理

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

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设置的颜色

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

FROM : hackersb | Author:王松