CSS樣式作用的優(yōu)先順序

CSS樣式是按照從左往右的順序執(zhí)行的，但一般沒必要太計(jì)較，只要把想要的都設(shè)置好了就行了。

我們提供的服務(wù)有：成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、岷縣ssl等。為超過(guò)千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的岷縣網(wǎng)站制作公司

CSS選擇器與優(yōu)先級(jí)詳解（一）

CSS選擇器又被稱為CSS樣式、CSS屬性選擇器。是由css命名及后面屬性及屬性值構(gòu)成一個(gè)整體。

1.基礎(chǔ)選擇器

a.id選擇器：通過(guò)設(shè)置元素的id屬性為該元素制定ID。ID由開發(fā)者指定。每個(gè)ID在文檔中必須是唯一的。在寫樣式表時(shí)，ID選擇器是以#開頭的。

HTML

CSS

執(zhí)行效果：

b.class選擇器：是以獨(dú)立于文檔元素的方式來(lái)指定樣式，使用類選擇器之前需要在html元素上定義類名，也就是要保證類名在html標(biāo)記中存在。

HTML

CSS

執(zhí)行效果：

c.元素選擇器：通過(guò)note節(jié)點(diǎn)名稱匹配元素。

HTML

CSS

2.屬性選擇器：

注意：最后一個(gè)選擇器是E[attr|=val]，由于輸入|會(huì)對(duì)表格造成影響，只能用/代替。

CSS3新增了一些屬性選擇器，待持續(xù)更新。

3.組合選擇器

示例如下：

實(shí)現(xiàn)效果如下：

示例如下：

從高到低依次是：

1.在屬性后面使用 !important會(huì)覆蓋頁(yè)面內(nèi)任何位置定義的元素樣式

2.作為style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式

3.id選擇器

4.類選擇器

5.偽類選擇器

6.屬性選擇器

7.標(biāo)簽選擇器

8.通配符選擇器

9.瀏覽器自定義

選擇器的特殊性值表述為4個(gè)部分，用0,0,0,0表示。

參考：

1. css優(yōu)先級(jí)計(jì)算規(guī)則

2. CSS選擇器筆記

3. Selectors MDN

4. CSS3 選擇器——基本選擇器

5. CSS3 選擇器——偽類選擇器

6. 征服高級(jí)CSS選擇器

css的優(yōu)先級(jí)順序是怎樣的

當(dāng)創(chuàng)建的樣式表越來(lái)越復(fù)雜時(shí)，一個(gè)標(biāo)簽的樣式將會(huì)受到越來(lái)越多的影響，這種影響可能來(lái)自周圍的標(biāo)簽，也可能來(lái)自其自身。下面我們從這兩方面去看看 CSS 樣式的優(yōu)先級(jí)。

CSS 的繼承性

CSS 的繼承特性指的是應(yīng)用在一個(gè)標(biāo)簽上的那些 CSS 屬性被傳到其子標(biāo)簽上。看下面的 HTML 結(jié)構(gòu)：

div

p/p/div

如果?div?有個(gè)屬性?color: red，則這個(gè)屬性將被?p?繼承，即?p?也擁有屬性?color: red。

由上可見，當(dāng)網(wǎng)頁(yè)比較復(fù)雜， HTML 結(jié)構(gòu)嵌套較深時(shí)，一個(gè)標(biāo)簽的樣式將深受其祖先標(biāo)簽樣式的影響。影響的規(guī)則是：

CSS 優(yōu)先規(guī)則1：?最近的祖先樣式比其他祖先樣式優(yōu)先級(jí)高。

例1：

!-- 類名為 son 的 div 的 color 為 blue --div style="color: red"

div style="color: blue"

div class="son"/div

/div/div

如果我們把一個(gè)標(biāo)簽從祖先那里繼承來(lái)的而自身沒有的屬性叫做"祖先樣式"，那么"直接樣式"就是一個(gè)標(biāo)簽直接擁有的屬性。又有如下規(guī)則：

CSS 優(yōu)先規(guī)則2："直接樣式"比"祖先樣式"優(yōu)先級(jí)高。

例2：

!-- 類名為 son 的 div 的 color 為 blue --div style="color: red"

div class="son" style="color: blue"/div/div

選擇器的優(yōu)先級(jí)

上面討論了一個(gè)標(biāo)簽從祖先繼承來(lái)的屬性，現(xiàn)在討論標(biāo)簽自有的屬性。在討論 CSS 優(yōu)先級(jí)之前，先說(shuō)說(shuō) CSS 7 種基礎(chǔ)的選擇器：

ID 選擇器， 如 #id{}

類選擇器， 如 .class{}

屬性選擇器， 如 a[href="segmentfault.com"]{}

偽類選擇器， 如 :hover{}

偽元素選擇器， 如 ::before{}

標(biāo)簽選擇器， 如 span{}

通配選擇器， 如 *{}

CSS 優(yōu)先規(guī)則3：優(yōu)先級(jí)關(guān)系：內(nèi)聯(lián)樣式 ID 選擇器 類選擇器 = 屬性選擇器 = 偽類選擇器 標(biāo)簽選擇器 = 偽元素選擇器

例3：

// HTMLdiv class="content-class" id="content-id" style="color: black"/div// CSS#content-id {

color: red;}.content-class {

color: blue;}div {

color: grey;}

最終的 color 為 black，因?yàn)閮?nèi)聯(lián)樣式比其他選擇器的優(yōu)先級(jí)高。

所有 CSS 的選擇符由上述 7 種基礎(chǔ)的選擇器或者組合而成，組合的方式有 3 種：

后代選擇符： .father .child{}

子選擇符： .father .child{}

相鄰選擇符: .bro1 + .bro2{}

當(dāng)一個(gè)標(biāo)簽同時(shí)被多個(gè)選擇符選中，我們便需要確定這些選擇符的優(yōu)先級(jí)。我們有如下規(guī)則：

CSS 優(yōu)先規(guī)則4：計(jì)算選擇符中 ID 選擇器的個(gè)數(shù)（a），計(jì)算選擇符中類選擇器、屬性選擇器以及偽類選擇器的個(gè)數(shù)之和（b），計(jì)算選擇符中標(biāo)簽選擇器和偽元素選擇器的個(gè)數(shù)之和（c）。按 a、b、c 的順序依次比較大小，大的則優(yōu)先級(jí)高，相等則比較下一個(gè)。若最后兩個(gè)的選擇符中 a、b、c 都相等，則按照"就近原則"來(lái)判斷。

例4：

// HTMLdiv id="con-id"

span class="con-span"/span/div// CSS#con-id span {

color: red;}div .con-span {

color: blue;}

由規(guī)則 4 可見，span 的 color 為 red。

如果外部樣式表和內(nèi)部樣式表中的樣式發(fā)生沖突會(huì)出現(xiàn)什么情況呢？這與樣式表在 HTML 文件中所處的位置有關(guān)。樣式被應(yīng)用的位置越在下面則優(yōu)先級(jí)越高，其實(shí)這仍然可以用規(guī)則 4 來(lái)解釋。

例5：

// HTMLlink rel="stylesheet" type="text/css" href="style-link.css"style type="text/css"@import url(style-import.css); div {

background: blue;}/stylediv/div// style-link.cssdiv {

background: lime;}// style-import.cssdiv {

background: grey;}

從順序上看，內(nèi)部樣式在最下面，被最晚引用，所以 div 的背景色為 blue。

上面代碼中，@import?語(yǔ)句必須出現(xiàn)在內(nèi)部樣式之前，否則文件引入無(wú)效。當(dāng)然不推薦使用?@import?的方式引用外部樣式文件，原因見另一篇博客：CSS 引入方式。

CSS 還提供了一種可以完全忽略以上規(guī)則的方法，當(dāng)你一定、必須確保某一個(gè)特定的屬性要顯示時(shí)，可以使用這個(gè)技術(shù)。

CSS 優(yōu)先規(guī)則5：屬性后插有?!important?的屬性擁有最高優(yōu)先級(jí)。若同時(shí)插有?!important，則再利用規(guī)則 3、4 判斷優(yōu)先級(jí)。

例6：

// HTMLdiv class="father"

p class="son"/p/div// CSSp {

background: red !important;}.father .son {

background: blue;}

雖然 .father .son 擁有更高的權(quán)值，但選擇器 p 中的 background 屬性被插入了 !important， 所以 p 的 background 為 red。

錯(cuò)誤的說(shuō)法

在學(xué)習(xí)過(guò)程中，你可能發(fā)現(xiàn)給選擇器加權(quán)值的說(shuō)法，即 ID 選擇器權(quán)值為 100，類選擇器權(quán)值為 10，標(biāo)簽選擇器權(quán)值為 1，當(dāng)一個(gè)選擇器由多個(gè) ID 選擇器、類選擇器或標(biāo)簽選擇器組成時(shí)，則將所有權(quán)值相加，然后再比較權(quán)值。這種說(shuō)法其實(shí)是有問題的。比如一個(gè)由 11 個(gè)類選擇器組成的選擇器和一個(gè)由 1 個(gè) ID 選擇器組成的選擇器指向同一個(gè)標(biāo)簽，按理說(shuō) 110 100，應(yīng)該應(yīng)用前者的樣式，然而事實(shí)是應(yīng)用后者的樣式。錯(cuò)誤的原因是：權(quán)重的進(jìn)制是并不是十進(jìn)制，CSS 權(quán)重進(jìn)制在 IE6 為 256，后來(lái)擴(kuò)大到了 65536，現(xiàn)代瀏覽器則采用更大的數(shù)量。。還是拿剛剛的例子說(shuō)明。11 個(gè)類選擇器組成的選擇器的總權(quán)值為 110，但因?yàn)?11 個(gè)均為類選擇器，所以其實(shí)總權(quán)值最多不能超過(guò) 100， 你可以理解為 99.99，所以最終應(yīng)用后者樣式。

CSS選擇器、優(yōu)先級(jí)以及!important知識(shí)總結(jié)

關(guān)于CSS選擇器，首先請(qǐng)看這里： CSS 選擇器參考手冊(cè)

通過(guò)以上，我們可以將CSS選擇器分為以下幾種：

script async src="http://jsfiddle.net/hysunny/3gwbeu3v/embed/html,css,result/"/script

示例：

說(shuō)明：以下E表示元素，attr表示屬性，val表示屬性的值。

說(shuō)明：以下E表示元素

示例：

示例：

示例：

示例：

E:not(s) ,匹配不符合當(dāng)前選擇器的任何元素

示例：

E:target ,匹配文檔中特定"id"點(diǎn)擊后的效果

示例：

這里我們簡(jiǎn)單討論下后代元素選擇器和子元素選擇器的區(qū)別

示例

CSS優(yōu)先級(jí)是指CSS樣式在瀏覽器中被解析的 先后順序 。

多重樣式（Mutiple Styles）：如果外部樣式、內(nèi)部樣式和內(nèi)聯(lián)樣式同時(shí)應(yīng)用于同一個(gè)元素，就是多重樣式的使用情況。

一般情況下，（ 外部 樣式）External style sheet （ 內(nèi)部 樣式）Internal style sheet （ 內(nèi)聯(lián) 樣式）Inline style

例外 ：如果外部樣式放在內(nèi)部樣式的后面，則外部樣式將會(huì)覆蓋內(nèi)部樣式。

示例：

給不同的選擇器分配不同的權(quán)值

解釋：

示例

結(jié)果：標(biāo)簽內(nèi)的數(shù)據(jù)顯示為藍(lán)色。

比較樣式的優(yōu)先級(jí)是，只需統(tǒng)計(jì)不同選擇器的個(gè)數(shù)，然后與對(duì)應(yīng)的權(quán)值相乘即可。根據(jù)結(jié)果便可得出優(yōu)先級(jí)。

看到這里，有些同學(xué)是不是對(duì)!important有點(diǎn)迷惑呀 為什么有了它，就優(yōu)先級(jí)最高吶 下面我們?cè)賮?lái)詳細(xì)講一講!important~

!important 是CSS1就定義的語(yǔ)法，作用是提高指定樣式的應(yīng)用優(yōu)先權(quán)。

語(yǔ)法格式： {cssRule !important} ，即寫在定義的最后面，例如： box { color: red !important}

聲明了 !important 的樣式，具有最高的優(yōu)先級(jí)，相當(dāng)于寫在最下面（最后定義）

IE 6.0 不完全 支持!important

IE支持重定義中的!important，例如：

你將會(huì)發(fā)現(xiàn)定義了樣式 class="yuanxin" 時(shí)，在IE下，字體顯示為紅色（#e00）。

但不支持同一定義中的 !important 。例如：

此時(shí)在IE6下不支持，你將會(huì)發(fā)現(xiàn)定義了樣式 class="yuanxin" 時(shí)，字體顯示為黑色（#000）。

解釋 ：

important的樣式屬性和覆蓋它的樣式屬性單獨(dú)使用時(shí)(不在一個(gè){}里)，IE 6.0認(rèn)為!important優(yōu)先級(jí)較高，否則當(dāng)含!important的樣式屬性被同一個(gè){}里的樣式覆蓋時(shí)，IE 6.0認(rèn)為!important較低!

再舉一個(gè)例子：

因?yàn)镮E 6.0一直都不完全支持這個(gè)語(yǔ)法，而其他的瀏覽器都支持。因此我們就可以利用這一點(diǎn)來(lái)分別利用!important，我們可以針對(duì)IE和非IE瀏覽器設(shè)置不同的樣式，只要在非IE瀏覽器樣式的后面加上!important。

完。

總結(jié)內(nèi)容參考以下：

w3school_CSS 選擇器參考手冊(cè)

阮一峰_CSS選擇器筆記

css選擇器優(yōu)先級(jí)深入理解

CSS 的優(yōu)先級(jí)機(jī)制[總結(jié)]

十分感謝你們的分享 n(*≧▽≦*)n

注：原文章首發(fā)于： CSS選擇器、優(yōu)先級(jí)以及!important知識(shí)總結(jié) ，現(xiàn)遷移至此。

script async src="http://jsfiddle.net/hysunny/3gwbeu3v/embed/html,css,result/"/script

網(wǎng)站題目：css樣式的優(yōu)先選擇權(quán),css樣式選擇器優(yōu)先級(jí)
分享路徑：http://m.rwnh.cn/article12/dsdhjgc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、網(wǎng)站改版、網(wǎng)站營(yíng)銷、關(guān)鍵詞優(yōu)化、云服務(wù)器、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)