css基礎篇(六)——選擇器優先級計算


1.css選擇器計算方法

場景描述:如下代碼,你認為文字會顯示什么顏色,原因是什么?

<style>
#box .item{
    color:blue;
}
.lbox .list .item{
    color:red;
}
</style>
<div id="box" class="lbox">
    <ul class="list">
        <li class="item">1.其實我是一個演員</li>
        <li class="item">2.其實我是一個演員</li>
    </ul>
</div>

解決上面的問題,先說說怎么計算優先級:

(1)定義幾個值:(默認為0)
ICE:表示計算結果;
I    :表示ID選擇器;
C   :表示Class選擇器;
E   :表示Element(元素)選擇器;
(2)計算規則:
css表達式遇到Id選擇器,則ICE的值+100
css表達式遇到Class選擇器,則ICE的值+10
css表達式遇到Element選擇器,則ICE的值+1
(3)結果說明:
ICE的結果越大說明該選擇器表達是的優先級越高

說明:!important優先級最高(一旦定義了!important,該表達式的優先級就是最高的);  *選擇器最低

如下圖:舉個例子

回到上面要解決的問題:

#box .item 表達式根據上面的計算方法:ICE=110;

.lbox .list .item表達式計算結果:ICE=30;

所以最終的上面代碼文字顯示顏色為blue;


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com