特指度

特指度表示一個(gè)css表達(dá)式的重要程度，可以通過(guò)一個(gè)公式來(lái)計(jì)算出一個(gè)數(shù)值，數(shù)值越大，越重要。

這個(gè)計(jì)算叫做“I-C-E”計(jì)算公式

1. I——Id；
2. C——class；
3. E——Element；
   即針對(duì)一個(gè)css選擇器表達(dá)式，遇到一個(gè)id就往特指度數(shù)值中加100，遇到一個(gè)class就往特指度數(shù)值中加10，遇到一個(gè)element就往特指度數(shù)值中加1。下面舉幾個(gè)css表達(dá)式的特指度計(jì)算結(jié)果：

還有一個(gè)重點(diǎn)要注意：!important優(yōu)先級(jí)最高，高于一切。*選擇器最低，低于一切。
好了，現(xiàn)在可以回到文章一開(kāi)始提到的特指度的計(jì)算公式了，那個(gè)計(jì)算結(jié)果大，瀏覽器就會(huì)以那個(gè)為優(yōu)先。

簡(jiǎn)版規(guī)則

如果你嫌上面的規(guī)則復(fù)雜，有一個(gè)簡(jiǎn)版規(guī)則，它只有3個(gè)規(guī)則，而且這三個(gè)規(guī)則比較好記，可以覆蓋大多數(shù)場(chǎng)景。

• 規(guī)則一、包含ID的選擇器勝過(guò)包含Class的選擇器，包含Class的選擇器勝過(guò)包含Element的選擇器；下面第一個(gè)特指度更高。

#div1 li{
            color:blue;
            }
.content .list li{
             color:red;
            }

• 規(guī)則二、不同選擇器的特指度比較是，不區(qū)分加載順序（相同選擇器在層疊時(shí)，后加載的覆蓋前加載的），例如下面代碼，雖然后加載，但是特指度低；

#div1{
        color:red;
    }
    .content{
        color:blue;
    }

• 規(guī)則三、設(shè)置的樣式高于繼承的樣式，不用考慮特指度。

#div1{
        color:red;
    }
    span{
        color:blue;
    }
<div id="div1">
        <span>span1</span>
    </div>

文章參考文獻(xiàn)王福朋的博客