css选择器优先级
浏览器通过优先级来判断哪一些属性值与一个元素最为相关,从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。
行内样式>ID>属性选择器、class、伪类>元素名、伪元素
权重分别对应:1000>100>10>1
优先级计算的另一种说法
优先级是由 A
、B
、C
、D
的值来决定的,其中它们的值计算规则如下:
如果存在内联样式,那么 A = 1
, 否则 A = 0
;
B
的值等于 ID选择器
出现的次数;
C
的值等于 类选择器
和 属性选择器
和 伪类
出现的总次数;
D
的值等于 标签选择器
和 伪元素
出现的总次数 。
#nav-global > ul > li > a.nav-link
以上代码套用上面的算法,依次求出 A
B
C
D
的值:
因为没有内联样式 ,所以 A = 0
;
ID选择器总共出现了1次, B = 1
;
类选择器出现了1次, 属性选择器出现了0次,伪类选择器出现0次,所以 C = (1 + 0 + 0) = 1
;
标签选择器出现了3次, 伪元素出现了0次,所以 D = (3 + 0) = 3
;
A
、 B
、C
、D
可以简记作:(0, 1, 1, 3)
。li /* (0, 0, 0, 1) */ ul li /* (0, 0, 0, 2) */ ul ol+li /* (0, 0, 0, 3) */ ul ol+li /* (0, 0, 0, 3) */ h1 + *[REL=up] /* (0, 0, 1, 1) */ ul ol li.red /* (0, 0, 1, 3) */ li.red.level /* (0, 0, 2, 1) */ a1.a2.a3.a4.a5.a6.a7.a8.a9.a10.a11 /* (0, 0, 11,0) */ #x34y /* (0, 1, 0, 0) */ li:first-child h2 .title /* (0, 0, 2, 2) */ #nav .selected > a:hover /* (0, 1, 2, 1) */ html body #nav .selected > a:hover /* (0, 1, 2, 3) */
#nav-list .item { color: #f00; } .nav-list .item { color: #0f0; }
算出 #nav-list .item
的优先级是 (0, 1, 1, 0)
, .nav-list .item
的优先级是 (0, 0, 2, 0)
。 左边第一位都是0, 再看看左边第二位,前者是1,后者是0, 所以(0, 1, 1, 0)
的大于 (0, 0, 2, 0)
,即 #nva-list .item
大于 .nav-list .item
,所以字体会是红色。
经过上面的优先级计算规则,可以知道内联样式的优先级是最高的,但是外部样式有没有什么办法覆盖内联样式呢? !important可以。
因为一般情况下,很少会使用内联样式 ,所以 !important
也很少会用到。如果不是为了要覆盖内联样式,建议不要使用 !important
。
如果内联样式用了 !important
,是不是外部样式就没有办法了呢?比如下面的代码:
<div class="app" style="color:#f00!important">666</div>
.app { color: 0f0!important; }
是的,这时候内联样式已经强大到不管外部样式怎么写都无法覆盖它了。这种情况在实际代码中是要杜绝的!千万不要在内联样式中使用 !important。
怎样覆盖!important?
第一种:
table td { height: 50px !important; } // 优先级第三 .myTable td { height: 50px !important; } // 优先级第二 #myTable td { height: 50px !important; } // 优先级第一
第二种:
使用相同的选择器,但是置于已有的样式之后:
td { height: 50px !important; }