css中如何使用選擇器

這篇文章將為大家詳細(xì)講解有關(guān)css中如何使用選擇器，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

代碼如下:

header>
 <nav class="nav-main" id="navigation">Here background</nav>
</header>
header nav {
 background-color: red;
}#navigation {  background-color: green;}</p> <p>.nav-main {
 background-color: blue;
}

以上三個(gè)樣式規(guī)則都會(huì)作用于 ID 值為 "navigation" 的 nav 標(biāo)簽，最終哪個(gè)樣式規(guī)則會(huì)生效呢，這取決于選擇器的特殊性(或優(yōu)先級(jí))高低，選擇器特殊性高的樣式會(huì)覆蓋特殊性低的樣式，經(jīng)過(guò)測(cè)試 nav 標(biāo)簽的背景會(huì)顯示為 green 綠色。

那么選擇器特殊性是如何計(jì)算的呢？

通常，我們使用四個(gè)以逗號(hào)分隔的數(shù)字來(lái)表示特殊性，比如:

1.每個(gè)元素選擇器貢獻(xiàn)特殊性為 0，0，0，1；
2.每個(gè)類、偽類或者屬性選擇器的特殊性為 0，0，1，0；
3.每個(gè)ID選擇器的特殊性為 0，1，0，0.
計(jì)算一個(gè)組合選擇器的特殊性的時(shí)候就先計(jì)算各種選擇器的數(shù)量以及對(duì)應(yīng)的特殊性再相加，比如

代碼如下:

div ul ul li           /* 0,0,0,4    4個(gè)元素選擇器 */</p> <p>div.aside ul li        /* 0,0,1,3    1個(gè)類選擇器，3個(gè)元素選擇器 */</p> <p>a:hover                /* 0,0,1,1    1個(gè)偽類選擇器，1個(gè)元素選擇器 */</p> <p>div.navlinks a:hover   /* 0,0,2,2    1個(gè)類選擇器，1個(gè)偽類選擇器，2個(gè)元素選擇器 */</p> <p>#title em              /* 0,1,0,1    1個(gè) ID 選擇器，1個(gè)元素選擇器 */</p> <p>h2#title em            /* 0,1,0,2    1個(gè) ID 選擇器，2個(gè)元素選擇器 */</p> <p>*                      /* 0,0,0,0    1個(gè)通用選擇器 */

注：多類選擇器有多少個(gè)類就計(jì)算多少個(gè)類，不支持多類選擇器的 IE6 會(huì)理解為一個(gè)類

比較選擇器特殊性高低直接從左向右依次比較，數(shù)字大的則優(yōu)先級(jí)更高，如果相同就比較下一位，所有位都相同則優(yōu)先級(jí)是一樣高，當(dāng)選擇器優(yōu)先級(jí)一樣高的時(shí)候后申明的樣式會(huì)覆蓋前面申明的樣式

每個(gè)級(jí)別的優(yōu)先級(jí)值是相互獨(dú)立的，13個(gè)元素選擇器寫(xiě)在一堆也不會(huì)比1個(gè)類選擇器的特殊性高

第一個(gè)0是用于行內(nèi)樣式的，且僅用于行內(nèi)樣式

代碼如下:

<nav ></nav> <!-- 1,0,0,0 -->

有一樣?xùn)|西可以無(wú)視特殊性，那就是 !important。使用 !important 可以把任何樣式規(guī)則標(biāo)記為重要

代碼如下:

.nav-main {
 background-color: blue !important;
 color: #666;
}

基本上，任何重要的樣式規(guī)則都可以覆蓋沒(méi)有標(biāo)記為重要的樣式規(guī)則，

代碼如下:

<div id="gohome"><a href="/" id="home">Home</a></div>
div#gohome a#home {
 color: red;
}</p> <p>div a {
 color: green !important;
}

上面的代碼會(huì)得到一個(gè)綠色 green 的鏈接，第一個(gè)規(guī)則有非常高的特殊性（0,2,0,2），

但是在 !important 面前一樣沒(méi)用，除非我們給第一個(gè)規(guī)則也標(biāo)記為重要

代碼如下:

div#gohome a#home {
 color: red !important;
}</p> <p>div a {
 color: green !important;
}

這時(shí)候鏈接就變?yōu)榧t色 red 了，都標(biāo)記為重要的情況下，則會(huì)使用前面提到的特殊性規(guī)則來(lái)解決，

所以使用 !important 的時(shí)候應(yīng)當(dāng)權(quán)衡，盡量不要用

另外，IE6 是支持 !important 的，只是不完全支持而已，當(dāng)在同一個(gè)選擇器中，在標(biāo)記為重要的樣式規(guī)則之后又重新定義了此樣式則 !important 將失效

代碼如下:

.header {
 color: red !important;     /* 標(biāo)準(zhǔn)瀏覽器 red */
 color: green;              /* IE6 green !important 失效 */
}

再有就是 IE6/7 可以允許在 !important 后面添加一些文字，依然能識(shí)別

代碼如下:

.header {
 color: red !important ie;     /* ie6/7 red */
}

關(guān)于css中如何使用選擇器就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。