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

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

網(wǎng)站制作、做網(wǎng)站的開發(fā)，更需要了解用戶，從用戶角度來建設(shè)網(wǎng)站，獲得較好的用戶體驗。創(chuàng)新互聯(lián)多年互聯(lián)網(wǎng)經(jīng)驗，見的多，溝通容易、能幫助客戶提出的運營建議。作為成都一家網(wǎng)絡(luò)公司，打造的就是網(wǎng)站建設(shè)產(chǎn)品直銷的概念。選擇創(chuàng)新互聯(lián)，不只是建站，我們把建站作為產(chǎn)品，不斷的更新、完善，讓每位來訪用戶感受到浩方產(chǎn)品的價值服務(wù)。

1.基礎(chǔ)選擇器

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

HTML

CSS

執(zhí)行效果：

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

HTML

CSS

執(zhí)行效果：

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

HTML

CSS

2.屬性選擇器：

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

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

3.組合選擇器

示例如下：

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

示例如下：

從高到低依次是：

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

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

3.id選擇器

4.類選擇器

5.偽類選擇器

6.屬性選擇器

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

8.通配符選擇器

9.瀏覽器自定義

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

參考：

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

2. CSS選擇器筆記

3. Selectors MDN

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

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

6. 征服高級CSS選擇器

Css中樣式的優(yōu)先級

當(dāng)在一個樣式聲明中使用一個 !important 規(guī)則時，此聲明將覆蓋任何其他聲明。雖然，從技術(shù)上講， !important 與優(yōu)先級無關(guān)，但它與最終的結(jié)果直接相關(guān)。使用 !important 是一個 壞習(xí)慣 ，應(yīng)該盡量避免，因為這破壞了樣式表中的固有的級聯(lián)規(guī)則 使得調(diào)試找bug變得更加困難了。當(dāng)兩條相互沖突的帶有 !important 規(guī)則的聲明被應(yīng)用到相同的元素上時，擁有更大優(yōu)先級的聲明將會被采用。

一些經(jīng)驗法則：

什么的情況下可以使用 !important：

A) 覆蓋內(nèi)聯(lián)樣式

你的網(wǎng)站上有一個設(shè)定了全站樣式的 CSS 文件，同時你（或是你同事）寫了一些很差的內(nèi)聯(lián)樣式。

全局的CSS文件會在全局范圍內(nèi)設(shè)置網(wǎng)站的外觀，而直接在各個元素上定義的內(nèi)聯(lián)樣式可能會覆蓋您的全局CSS文件。 內(nèi)聯(lián)樣式和!important都被認(rèn)為是非常不好的做法，但是有時你可以在CSS文件里用!important去覆蓋內(nèi)聯(lián)樣式。

在這種情況下，你就可以在你全局的 CSS 文件中寫一些 !important 的樣式來覆蓋掉那些直接寫在元素上的行內(nèi)樣式。

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

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

CSS 的繼承性

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

div

p/p/div

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

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

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

例1：

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

div style="color: blue"

div class="son"/div

/div/div

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

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

例2：

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

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

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

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

ID 選擇器， 如 #id{}

類選擇器， 如 .class{}

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

偽類選擇器， 如 :hover{}

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

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

通配選擇器， 如 *{}

CSS 優(yōu)先規(guī)則3：優(yōu)先級關(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，因為內(nèi)聯(lián)樣式比其他選擇器的優(yōu)先級高。

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

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

子選擇符： .father .child{}

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

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

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

例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ā)生沖突會出現(xiàn)什么情況呢？這與樣式表在 HTML 文件中所處的位置有關(guān)。樣式被應(yīng)用的位置越在下面則優(yōu)先級越高，其實這仍然可以用規(guī)則 4 來解釋。

例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?語句必須出現(xiàn)在內(nèi)部樣式之前，否則文件引入無效。當(dāng)然不推薦使用?@import?的方式引用外部樣式文件，原因見另一篇博客：CSS 引入方式。

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

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

例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。

錯誤的說法

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

19、css樣式的優(yōu)先級

1、最近的祖先樣式比其他祖先樣式優(yōu)先級高。

2、"直接樣式"比"祖先樣式"優(yōu)先級高。

首先，我們需要知道有哪些選擇器：

1）ID 選擇器， 如 #id{}

2）類選擇器， 如 .class{}

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

4）偽類選擇器， 如 :hover{}

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

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

7）通配選擇器， 如 *{}

3、內(nèi)聯(lián)樣式 ID 選擇器 類選擇器 = 屬性選擇器 = 偽類選擇器 標(biāo)簽選擇器 = 偽元素選擇器

4、當(dāng)一個標(biāo)簽同時被多個選擇符選中，我們便需要確定這些選擇符的優(yōu)先級。我們有如下規(guī)則：計算選擇符中 ID 選擇器的個數(shù)（a），計算選擇符中類選擇器、屬性選擇器以及偽類選擇器的個數(shù)之和（b），計算選擇符中標(biāo)簽選擇器和偽元素選擇器的個數(shù)之和（c）。按 a、b、c 的順序依次比較大小，大的則優(yōu)先級高，相等則比較下一個。若最后兩個的選擇符中 a、b、c 都相等，則按照"就近原則"來判斷。

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

文章名稱：css樣式元素和類優(yōu)先級,css四種樣式的優(yōu)先級
網(wǎng)站鏈接：http://chinadenli.net/article2/dsiopoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、網(wǎng)站設(shè)計、小程序開發(fā)、做網(wǎng)站、品牌網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站

廣告

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