關(guān)系選擇器
各種關(guān)系選擇器
后代選擇器選中block中的2個p元素
子元素選擇器只選中block的直接子元素p元素(即僅第一個p元素)
偽類選擇器
偽類選擇器
偽類選擇器
偽元素選擇器
偽元素選擇器
屬性選擇器
下面我們使用這四個 a 元素來具體實踐下：
<a target="_blank">騰訊課堂</a>
<a href="css-basic.pdf" >CSS學(xué)習(xí)文檔</a>
<a href="css.png" >CSS 腦圖</a>
<a title=“IMWeb”>IMWeb學(xué)院</a>
要求如下:
- 選中 title 屬性鏈接
- 選中新窗口打開的鏈接（可在后面添加一個icon，以區(qū)分其他鏈接）
- 選中不同的文件類型鏈接（可在后面添加對應(yīng)的圖標(biāo)，以表示資源類型）
- 選中絕對路徑鏈接
對應(yīng)的選擇器如下：
/* 選中 title 屬性鏈接 */
a[title] {}
/* 選中新窗口打開的鏈接 */
a[target="_blank"] {}
/* 選中 pdf */
a[href$=".pdf"] {}
/* 選中 png */
a[href$=".png"] {}
/* 選中絕對路徑鏈接 */
a[href^="http://"],
a[href^="https://"] {}
選擇器參考手冊
一下講了這么多選擇器，估計一時半會是消化不了的。不過沒關(guān)系，我們可以慢慢來，視頻可以多看幾次，也可以先有個印象繼續(xù)學(xué)習(xí)后面的內(nèi)容，然后再回過頭來消化消化。同時這里也為你找了一些非常具有參考價值的選擇器文檔，可以方便你學(xué)習(xí)查閱。
首先是W3school的選擇器參考，歸類很詳細(xì)，非常適合入門學(xué)習(xí)：
- CSS 元素選擇器
- CSS 類選擇器詳解
- CSS ID 選擇器詳解
- 屬性選擇器詳解 | W3School
- CSS 后代選擇器
- CSS 子元素選擇器
- CSS 相鄰兄弟選擇器
- CSS 偽類
- CSS 偽元素
或者直接參考選擇器手冊：
- 選擇器參考手冊 | MDN（點擊相應(yīng)的選擇器為英文鏈接，可以在地址欄中將 en-US 換成 zh-CN 即可）
- CSS 選擇器 | 菜鳥教程
- 選擇器參考手冊 | W3School
- Selectors Level 3 | W3（官方參考手冊，英文版）
- Selectors Level 4 | W3（第四代選擇器草稿）
選擇器效率
根據(jù)網(wǎng)站效率專家 Steve Souders 指出，各種 CSS 選擇器的效率由高至低排序如下
- id選擇器（#myid）
- 類選擇器（.myclassname）
- 標(biāo)簽選擇器（div,h1,p）
- 相鄰選擇器（h1 + p）
- 子選擇器（ul > li）
- 后代選擇器（li a）
- 通配符選擇器（*）
- 屬性選擇器（a[rel="external"]）
- 偽類選擇器（a:hover,li:nth-child）
選擇器解讀順序
一般來說，在具體的項目中，HTML 結(jié)構(gòu)都比較復(fù)雜，所以關(guān)系選擇器使用非常的普遍。對于關(guān)系選擇器來說，我們的閱讀習(xí)慣是從左到右，但是瀏覽器解讀選擇器，遵循的原則是從選擇器的右邊到左邊讀取。
如對于選擇器.list .item .item-tt，瀏覽器先找的是.item-tt，然后繼續(xù)向父級元素尋找.item，再找.list，這樣才完成了最終的選擇器匹配。
所以如果路徑鏈越短，效率也就相應(yīng)有所提高。這里建議選擇器的層級最多不要超過4層，如.demo .list .item .item-tt .tt-link就有5層了，可根據(jù)實際情況考慮縮短為4層以內(nèi)，如.demo .item-tt .tt-link
