CSS魔法堂：選擇器及其優先級

時間  2019-12-19
標籤 css 選擇器 及其 優先級 欄目 CSS 简体版
原文   原文鏈接

1、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　  
css

首先看看一道阿里這期網申的題目吧！html

1.找出下面優先級相同的選擇器web

　　A. img.thumb:after　　B.[data-job="frontend"]::first-letter瀏覽器

　　C. #main::before　　   D. [type="checkbox"]:checked　　E. ul#shop-listfrontend

 

2、回顧選擇器類型　　　　　　　　　　　　　　　　　  　　　　       
dom

 html片斷ide

<body>
  <div id="content">
    <div>Hello world</div>
    <div class="block-end">EOF</div>
  </div>
</body>

 基本選擇器spa

 

  1. 元素（類型）選擇器.net

div{
  color: red;
}

  2. 類選擇器插件

.block-end{
  color: #000;
}

  3. ID選擇器

#content{
  color: blue;  
}

  4. 通用元素選擇器，匹配任何元素（IE5.5不支持）

*{
  width: 1000px;
}

 

組合選擇器

 

1. 羣組選擇器

/** 格式
 * 選擇器A, 選擇器B{樣式規則}
 */
div, body{
  width: 1200px;
}

對N個選擇器獲取的dom元素應用同一個樣式，減小重複代碼。

2. 後代選擇器（派生選擇器）

/** 格式
 * 父選擇器 後代選擇器{樣式規則}
 */
body div{
  color: #888;
}

body下的全部div元素均應用上述樣式。

3. 子元素選擇器（IE5.5~IE6不支持）

/** 格式
 * 父選擇器 > 子元素選擇器{樣式規則}
 */
body > div{
  color: #111;
}

僅body的div孩子元素才應用上述樣式。

4. 毗鄰弟弟元素選擇器（原名相鄰兄弟元素選擇器）（IE5.5~IE6不支持）

/** 格式
 * 選擇器A + 選擇器B{樣式規則}
 */
#content + div{
  color: #111;
}

僅div#content後緊跟着的同級div應用上述樣式，若如 <div id="content"></div><br/><div id="block-end">EOF</div> ，因爲div#block-end不是緊跟在div#content後，所以不會應用上述樣式。

5. 弟弟元素選擇器（原名爲兄弟選擇器）（IE5.5~IE6不支持）

/** 格式
 * 選擇器A ~ 選擇器B{樣式規則}
 */
#content ~ div{
  color: #222;
}

僅div#content後的同級div都會應用上述樣式，如 <div id="content"></div><br/><div id="block-end">EOF</div>  ，div#block-end都會應用上述樣式。

 

屬性選擇器

 

1. 基礎選擇器[attr]（如： div[id] ）（IE5.5~IE6不支持）

  匹配全部具備該屬性，且符合基礎選擇器條件的元素。

2. 基礎選擇器[attr=value]（如 div[id=content] ）（IE5.5~IE6不支持）

  匹配全部attr的屬性值等於value，且符合基礎選擇器條件的元素。

3. 基礎選擇器[attr~=value]（如 div[val~=content] ）（IE5.5~IE6不支持）

  匹配如<div val="content dir"></div>的元素，就是匹配屬性值具備多個空格分隔的值，其中一個值等於value的元素。

4. 基礎選擇器[attr|=value]（如 div[lang|=en] ）（IE5.5~IE6不支持）

 匹配如<div lang="en-us"></div>的元素，就是匹配屬性值以value或value-爲開頭的元素。

5. 基礎選擇器[attr^=value]（如 div[id^=cont] ）（IE5.5~IE6不支持）

 匹配如<div id="content"></div>或<div id="contdummy"></div>的元素，就是匹配屬性值以value開頭的元素。

6. 基礎選擇器[attr$=value]（如 div[id$=tent] ）（IE5.5~IE6不支持）

 匹配如<div id="content"></div>或<div id="dummytent"></div>的元素，就是匹配屬性值以value結尾的元素。

7. 基礎選擇器[attr*=value]（如 div[id*=ten] ）（IE5.5~IE6不支持）

 匹配如<div id="content"></div>或<div id="dummytent"></div>的元素，就是匹配屬性值含value的元素。

 

僞類選擇器

 

  咱們可將僞類選擇器再細分一下，以便記憶！

  結構性僞類選擇器

    1. E:first-child：當元素E做爲其父元素下的第一個子元素時，匹配成功。（IE5.5~IE6不支持）

    2. E:root：當元素E爲文檔的根元素（就是HTMLHtmlElement元素）時，匹配成功。(IE均不支持)

    3. E:nth-child(n)：當元素E做爲其父元素下第N個子元素時，匹配成功。n從1開始。（IE5.5~IE8不支持）

    4. E:nth-last-child(n)：與E:nth-child(n)效果同樣，只不過是反方向遍歷。n從1開始。（IE5.5~IE8不支持）

    5. E:nth-of-type(n)：當元素E爲其父元素下同類標籤的第N個時，匹配成功。n從1開始。（IE5.5~IE8不支持）

    6. E:nth-last-of-type(n)：與E:nth-last-of-type(n)效果同樣，只不過期反方向遍歷。n從1開始。（IE5.5~IE8不支持）

    7. E:last-child：當E元素做爲其父元素下最後一個子元素時，匹配成功。（IE5.5~IE8不支持）

    8. E:first-of-type：與E:nth-of-type(1)效果同樣。（IE5.5~IE8不支持）

    9. E:last-of-type：與E:nth-last-of-type(1)效果同樣。（IE5.5~IE8不支持）

    10.E:only-child：當E元素爲其父元素下的惟一一個子元素，匹配成功。（IE5.5~IE8不支持）

    11.E:only-of-type：當E元素爲其父元素下的惟一一個該標籤類型的子元素時，匹配成功。（IE5.5~IE8不支持）

    12.E:empty：當E元素下不包含任何子元素時，匹配成功。注意：文本節點也被視爲子元素。（IE5.5~IE8不支持）

  注意：nth-child(n)中n的合法寫法以下

  ①.純數字，指定位置索引，索引從1開始；

  ②.n，指定匹配全部位置索引，n會自動從0開始自增加，至於什麼時候才中止就不得而知了，表達式結果爲0時自動轉換爲；

  ③.純數字n，如2n，指定匹配偶數位置索引的元素，n會自動從0開始自增加，至於什麼時候才中止就不得而知了，表達式結果爲0時自動轉換爲1；

  ④.純數字n +/- 純數字，如2n+1，指定匹配奇數位置索引的元素，n會自動從0開始自增加，至於什麼時候才中止就不得而知了，表達式結果爲0時自動轉換爲。

  動態僞類選擇器（E:hover，IE5.5~7只支持在a元素上應用，IE8+支持在其餘元素上使用）

　 1. E:link：當元素E（a標籤）未被點擊時，匹配成功。

　 2. E:visited：當元素E（a標籤）點擊過期，匹配成功。

    3. E:hover：必須在E:link、E:visited後聲明纔有效。當元素E（IE5.5~7時爲a標籤，IE8+可爲其餘標籤）正被鼠標懸停時，匹配成功。

    4. E:active：必須在E:hover後聲明纔有效。當鼠標已經在元素E（a標籤）按下，但未釋放左鍵時，匹配成功。

    5. E:focus：當元素E（元素E必須爲能夠接收鍵盤或用戶輸入的元素）得到焦點時，匹配成功。（IE8的標準模式開始支持）

  語言 :lang僞類選擇器（IE5.5~8不支持）

　  1. E:lang(c)：當元素的lang屬性等於c時，則匹配成功。

  UI元素狀態僞類選擇器（IE5.5~8不支持）

     1. E:enabled：元素E（E爲表單元素）可用時，匹配成功。

     2. E:disabled：元素E（E爲表單元素）不可用時，匹配成功。

     3. E:checked：元素E（E爲input[type=radio]或input[type=checkbox]元素）被鉤選時，匹配成功。

  否認僞類選擇器（IE5.5~8不支持）

     1. E:not(其餘類型的選擇器)：當元素E不符合其餘類型的選擇器條件時，匹配成功。

   E:target 僞類選擇器（ IE瀏覽器徹底不支持:target僞類，另外一個小問題就是Opera 在使用「前進」和後退按鈕時不支持該選擇器）

     1. E:target：當你使用錨點(片斷標識符 fragment identifier)的時候，好比，http://www.smashingmagazine.com/2009/08/02/bauhaus- ninety-years-of-inspiration/#comments，這「#comments」就是一個片斷標識符，你就可使 用:target僞類來控制目標的樣式。

   ::selection 僞類選擇器（IE5.5~8不支持）

     1. E::selection：被用戶選區的元素部分

 

僞元素選擇器

  僞元素就是瀏覽器自動在匹配的匹配元素前、後增長的元素，或者是截取匹配元素內的一部分。

1. E:before（新寫法E::before）：用於向元素E前添加內容（IE8的標準模式開始支持）

2. E:after（新寫法E::after）：用於向元素E後添加內容（IE8的標準模式開始支持）

示例：

<style type="text/css">
div:before{
  content: "beforeDiv"
}
div:after{
  content: "afterDiv"
}
</style>
<div>content</div>

效果是： beforeDivcontentafterDiv 

3. E:first-line（新寫法E::first-line）：僅僅當元素E爲塊級元素時有效。用於向元素E中的文字的首行添加特殊樣式。

4. E:first-letter（新寫法E::first-letter）：用於向元素E的首個字母添加特殊樣式

5. E:input-placeholder：用於向元素E的placeholder添加特殊樣式。因爲未成爲W3C規範，所以須要加瀏覽器廠商前綴，具體以下

/*for old version of ff*/
input:-moz-input-placeholder{
}
input:-ms-input-placeholder{
}
/*for modern browsers*/
input::-webkit-input-placeholder{
}
input::-moz-input-placeholder{
}

並且僅有如下屬性可用：color、font-size、font-style、font-weight、letter-spacing、line-height、padding、text-align、text-decoration。

注意：

/* 因爲僞元素選擇器必須爲最後一個選擇器，所以下列css樣式將失效 */
div::before div{
    width: 100px;
    height: 100px;
    background-color: red;   
}

 

3、選擇器的優先級計分規則　　　　　　　　　　　　　　　　　　　　　　

  優先級是決定不一樣選擇器的相一樣式規則對同一元素的生效狀況，優先級高的將覆蓋優先級低的樣式規則。而優先級又受到樣式來源和選擇器特殊性的影響，下面咱們一塊兒來了解如下。

  1. 來源

  　　行內樣式 > 頁內樣式 > 外部引用樣式 > 瀏覽器默認樣式

  2. 特殊性（由四個緯度組合）

選擇器類型 緯度（a,b,c,d）
行內樣式 1,0,0,0
ID選擇器 0,1,0,0
類選擇器、屬性選擇器、僞類選擇器 0,0,1,0
元素（類型）選擇器，僞元素（類型）選擇器 0,0,0,1
通用元素選擇器、僞類:not選擇器 0,0,0,0

　　　　　　　　　　　　　　　　　　注意：多種選擇器類型時，同位疊加便可獲得總緯度。

                                                                   參考：http://www.w3.org/TR/CSS21/cascade.html#specificity

  3. 計算優先級的流程

     (a). 首先根據選擇器類型計算出總緯度

     (b). 若緯度相同則比較來源

     (c). 若前二者相同，則後面聲明的優先級高。

  4. 經過!important提升優先級(IE5.5~6不支持)

    經過在樣式規則後面添加!important關鍵詞，能夠將該樣式規則提升到最高優先級。

.test{
  color: red !important;
  color: blue;
}

   IE5.5~6下, 匹配元素的文字爲blue;而其餘瀏覽器則爲藍色；IE7+下就顯示紅色。

   但!important不是一個優雅的辦法，並且會使得樣式難以調試，下面是時是使用建議：

   1. 永遠不要在全局CSS規則中使用;

   2. 永遠不要在自制的插件中使用;

   3. 只在須要覆蓋全局或外部插件的css規則（如Extjs、YUI插件的樣式）的特定頁面中才使用;

   4. 首先考慮使用優先級來解決問題而不是!important.

   適合使用的場景：

        將行內樣式提取出來時，但此時已經有一個全站樣式了;

   覆蓋!important：

/* 寬度爲200px */
E {
  width: 200px; !important   
  width: 100px;
}
/* 寬度爲300px */
E {
  width: 200px; important
  width: 100px;
  width: 300px; important
}

   參考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity

 

 5. 僞類 :not 選擇器緯度爲0,0,0,0

  僞類 :not 選擇器自身緯度爲0,0,0,0 ，但其括號內部的選擇器緯度則和上述表格一致。 div:not(.content) { width: 100px; } 優先級計算以下：

div ── 緯度 0,0,0,1

:not ── 緯度 0,0,0,0

.content ── 緯度 0,0,1,0

總緯度 ── 0,0,1,1

 

6. IE6中的bug

IE6中僞類 :hover 、 :active 和 :visited 選擇器的緯度不是0,0,1,0，而是0,0,2,0。

// 緯度是0,0,2,1
.cls1 .cls2 a{
  color: red;
}
// IE6下的緯度是0,0,2,1
// IE7+的緯度是0,0,1,1
a:hover{
  color: blue;
}

參考：

http://www.cnblogs.com/ddshou/archive/2009/05/05/1449768.html

http://www.cnblogs.com/ddshou/archive/2009/05/05/1449770.html

 

4、瀏覽器解析選擇器的順序——key selector（關鍵字查詢）　　　　      

  就是從右向左解析選擇器，這樣效率就更高了。

 

5、一塊兒作題木吧！　　　　　　　　　　　　　　　　　　　　　　　　

A. img.thumb:after，總緯度是0,0,1,2

B.[data-job="frontend"]::first-letter，總緯度是0,0,1,1

C. #main::before，總緯度是0,1,0,1

D. [type="checkbox"]:checked，總緯度是0,0,2,0

E. ul#shop-list，總緯度是0,1,0,1

因爲該題目假定樣式來源一致，所以樣式優先級相同的就是C和E了。

 

6、參考　　　　　　　　　　　　　　　　　　　　　　　　　　　　    

  CSS選擇器 http://www.cnblogs.com/liontone/archive/2010/12/29/1920437.html

  http://www.w3school.com.cn/cssref/css_selectors.asp

  http://blog.163.com/hongshaoguoguo@126/blog/static/1804698120134491240171/

  http://blog.csdn.net/stationxp/article/details/38736261

 

7、 總結　　　　　　　　　　　　　　　　　　　　　　　　　　　　  

  選擇器是鏈接標籤和樣式規則的橋樑，熟悉它們和瀏覽器支持狀況並做適當的填坑，將方便咱們開發。

  尊重原創，轉載請註明來自：http://www.cnblogs.com/fsjohnhuang/p/3940732.html ^_^肥仔John

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程