CSS選擇器概況

選擇器{
  屬性: 值; 
}

• CSS選擇器類似于地址俊卤，通過選擇器的地址作用到標簽里.

基礎選擇器

元素選擇器

元素名{
    屬性:值;
}

• 根據(jù)指定的元素, 在當前界面中找到所有的該元素, 然后設置屬性.
• 因為選中的是所有的該元素双谆，所以會在相同元素不同屬性的時候顯示出弱勢.
  
  

Id選擇器

#id名稱{
    屬性:值;
}
------------------------
<p id="id名稱">......</p>

• 根據(jù)指定的id名稱找到對應的標簽, 然后設置屬性.
• 在一個HTML文檔中的id是不可以重復的.
• Id的值只能由字母杠娱、數(shù)字、下劃線稽揭，并且不能由數(shù)字開頭.
• Id的值不能是HTML標簽的名稱.
  
  

類選擇器

.類名{
    屬性:值;
}
------------------------
<p class="類名 類名">......</p>

• 根據(jù)指定的類名稱找到對應的元素, 然后設置屬性.
• 在一個HTML文檔中的class的值是可以重復的.
• 在編寫class選擇器時一定要在class名稱前面加上點.
• Class的值只能由字母、數(shù)字党巾、下劃線，并且不能由數(shù)字開頭.
• Class的值不能是HTML標簽的名稱.
  
  

通配符選擇器

*{
    屬性:值;
}

• 給當前界面上所有的標簽設置屬性.

關(guān)系選擇器

后代選擇器

選擇器1 選擇器2{
  屬性: 值;
}

• 找到所有選擇器1, 然后在選擇器1下面去查找選擇器2選中的元素霜医， 設置屬性.
• 放進選擇器1中的所有選擇器2都是后代.
• 后代選擇器可以通過空格一直延續(xù)下去.
  
  

子元素選擇器

選擇器1 > 選擇器2{
    屬性: 值;
}

• 先找到所有選擇器1齿拂， 然后在選擇器1中查找所有直接關(guān)系的選擇器2，設置屬性.
• 子元素選擇器選中父子關(guān)系的元素肴敛，不會選中被其他元素嵌套的元素.
• 子元素選擇器可以通過 > 符號一直延續(xù)下去.
  
  

相鄰兄弟選擇器

選擇器1 + 選擇器2{
    屬性:值;
}

• 給選擇器1后面緊跟的那個選擇器2設置屬性.
  
  

通用兄弟選擇器

選擇器1 ~ 選擇器2{
    屬性:值;
}

• 選中選擇器1后面的所有選擇器2選中的所有元素署海，設置屬性.

偽類選擇器

普通偽類選擇器

選擇器:關(guān)鍵字{
  屬性: 值;
}
--------------------------------
<a href="#">內(nèi)容......</a>

結(jié)構(gòu)性偽類選擇器

E:first-child和E:last-child

• first-child和last-child選擇器用來定位第一個和最后一個特定的子元素【每個結(jié)構(gòu)會重新計算】.
• 例如以下代碼，會選中p1医男，p3砸狞，p4和p6.

<div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
</div>

<div>
<p>p4</p>
<p>p5</p>
<p>p6</p>
</div>

E:nth-child(n)和E:nth-last-child(n)

    <style>
        p,h1{
            height:30px;
            width:300px;
            border:1px solid #00A2E9;
        }
        p:nth-child(2n){
            background-color: #64b0ff;
        }
    </style>
-------------------------------------------
<div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
</div>

<div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
</div>

<div>
<p>p1</p>
<h1>h1</h1>
<p>p2</p>
<p>p3</p>
</div>

運行效果

• nth-child(n) 選擇器用來定位某個父元素的一個或多個特定的子元素【每個父元素下的選擇器會重新計算參數(shù)n】. 其中n是其參數(shù)，取值是整數(shù)值镀梭、表達式(2n+1刀森、-n+5)和關(guān)鍵詞(odd、even).

• 但是這種方法有很大的缺陷报账，渲染的原理是選中該父元素下的第n個子元素研底，然后核對選中的是否是特定的子元素，再進行渲染.但如果不是特定的子元素透罢，那么該元素不會被渲染榜晦，并且參數(shù)n會直接跳到下一個取值.【如圖h1沒有被渲染，但是p2也沒有被渲染】

• nth-last-child(n) 選擇器和前面的nth-child(n)選擇器一樣羽圃，不同點只是從某父元素的最后一個子元素開始計算乾胶，這里的使用就不舉例說明了.
  
  

E:nth-of-type(n) 和E:nth-last-of-type(n)

• E:nth-of-type(n)和E:nth-child(n)很相似，參數(shù)n 的取值規(guī)律一樣.

• 這個方法正好彌補了E:nth-child(n)的缺陷统屈，用E:nth-of-type(n)來定位于父元素中某種類型的子元素是非常好用的.

• E:nth-last-of-type(n) 選擇器和前面的E:nth-of-type(n)選擇器一樣胚吁，不同點只是從某父元素的最后一個子元素開始計算，這里的使用就不舉例說明了.

偽元素選擇器

<style>
  選擇器::偽元素{
    content:" "
</style>

屬性選擇器

<style>
  E[attribute]{
    屬性:值
}
</style>

• [attribute|=value]和[attribute^=value]的區(qū)別在于[attribute|=value]中的只能找到value開頭,并且value是被-和其它內(nèi)容隔開的.
• [attribute*=value]和[attribute~=value]的區(qū)別在于[attribute~=value]中的value必須被空格隔開的.

選擇器優(yōu)化

對于瀏覽器來說，解析每種選擇器所耗費的時間并不是一樣的吨掌。所以當我們使用選擇器的時候也有必要了解如何才能寫出最優(yōu)選擇器.

選擇器效率

根據(jù)網(wǎng)站效率專家 Steve Souders 指出半抱，各種 CSS 選擇器的效率由高至低排序如下

*   id選擇器（#myid）
*   類選擇器（.myclassname）
*   標簽選擇器（div,h1,p）
*   相鄰選擇器（h1 + p）
*   子選擇器（ul > li）
*   后代選擇器（li a）
*   通配符選擇器（*）
*   屬性選擇器（a[rel="external"]）
*   偽類選擇器（a:hover,li:nth-child）

在以下代碼中我們可以通過很多種方法去選中它，如p膜宋，.red窿侈，#test，[class="red"]等等. 但如按照執(zhí)行效率來秋茫，id選擇器是最佳的史简，其次是類選擇器，然后是元素選擇肛著，最后才是屬性選擇器.

<p id="test" class="red">我用來測試選擇器的優(yōu)化</p>

選擇器解讀順序

瀏覽器解讀選擇器圆兵，遵循的原則是從選擇器的右邊到左邊讀取.
**例如

<style>
  .list .item .item-tt{
    color:"blue";
  }
</style>

這個選擇器中跺讯，瀏覽器先找的是.item-tt，然后繼續(xù)向父級元素尋找.item殉农，再找.list刀脏，這樣才完成了最終的選擇器匹配.
所以如果路徑鏈越短，效率也就相應有所提高.

選擇器參考手冊

首先是W3school的選擇器參考超凳，歸類很詳細愈污，非常適合入門學習：

• CSS 元素選擇器
• CSS 類選擇器詳解
• CSS ID 選擇器詳解
• 屬性選擇器詳解 | W3School
• CSS 后代選擇器
• CSS 子元素選擇器
• CSS 相鄰兄弟選擇器
• CSS 偽類
• CSS 偽元素

或者直接參考選擇器手冊：

• 選擇器參考手冊 | MDN（點擊相應的選擇器為英文鏈接，可以在地址欄中將 en-US 換成 zh-CN 即可）
• CSS 選擇器 | 菜鳥教程
• 選擇器參考手冊 | W3School
• Selectors Level 3 | W3（官方參考手冊轮傍，英文版）
• Selectors Level 4 | W3（第四代選擇器草稿）

參考資料

• 如何提升 CSS 選擇器性能
• CSS選擇器的優(yōu)化
• Efficiently Rendering CSS