1. 引言

　　選擇器類型過多將導(dǎo)致一些問題，是什么問題呢？咱們直接舉例子說明。

　　

　　上圖中，css中的兩個(gè)選擇器都是針對(duì)<span>的，而且兩個(gè)設(shè)置的顏色不一樣，這里的<span>到底聽從誰的命令？

　　上面還是比較簡(jiǎn)單的，下面在來一個(gè)復(fù)雜的：

　　

　　上圖中的<li>該顯示成什么顏色呢？

2. 特指度

　　要解決以上問題，我們需要引入一個(gè)概念——特指度（specificity）。特指度表示一個(gè)css選擇器表達(dá)式的重要程度，可以通過一個(gè)公式來計(jì)算出一個(gè)數(shù)值，數(shù)越大，越重要。

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

I——Id；

C——Class；

E——Element；

　　即，針對(duì)一個(gè)css選擇器表達(dá)式，遇到一個(gè)id就往特指度數(shù)值中加100，遇到一個(gè)class就往特指度數(shù)值中加10，遇到一個(gè)element就往特指度數(shù)值中加1。

　　下面舉幾個(gè)css表達(dá)式的特指度計(jì)算結(jié)果，大家也自己算一算，是不是對(duì)：

CSS選擇器表達(dá)式	特指度計(jì)算結(jié)果
p	1
p.large	11
P#large	101
div p#large	102
div p#large ul.list	113
div p#large ul.list li	114

　　還有一個(gè)重點(diǎn)要注意：!important優(yōu)先級(jí)最高，高于上面一切。* 選擇器最低，低于一切。

　　好了，你現(xiàn)在可以返回文章一開始提出的兩個(gè)問題，根據(jù)特指度計(jì)算公式計(jì)算，哪個(gè)的計(jì)算結(jié)果大，瀏覽器就會(huì)以哪個(gè)為優(yōu)先。

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

　　如果你嫌上面的計(jì)算過于復(fù)雜，有一個(gè)簡(jiǎn)版規(guī)則。它只有三個(gè)規(guī)則，這三個(gè)規(guī)則能覆蓋大多數(shù)情況，而且比較好記。

　　規(guī)則一，包含ID的選擇器勝過包含Class的選擇器，包含Class的選擇器勝過包含元素的選擇器；例如下圖，第一個(gè)特指度更高：

　　

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

　　

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

??????

??????

　　其實(shí)，大部分情況下，你通過這個(gè)簡(jiǎn)版的規(guī)則，即可判斷選擇器的優(yōu)先級(jí)。

轉(zhuǎn)載于:https://www.cnblogs.com/jiqing9006/p/5398708.html

總結(jié)

以上是生活随笔為你收集整理的css选择器的优先级的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。