由Harttle發表在天碼營

我們知道CSS是由選擇符和屬性/值列表構成的，選擇符的重要性自然不言而喻。 作為前端開發者選擇符想必不是問題，然而前幾天面試還真問到了~和+是幹嗎用的！ 長時間不用的選擇符自然就會忘了，來總結一下吧！

萬維網聯盟在 HTML 4.0 之外提出層疊樣式表（CSS），使用CSS完成樣式與內容的分離。層疊樣式表（Cascading Style Sheets，CSS）， 又稱串樣式列表、層次結構式樣式表文件，一種用來為結構化文檔（如HTML文檔或XML應用）添加樣式（字體、間距和顏色等）的計算機語言，由W3C定義和維護。

CSS共有5種基本選擇器：

1. 類型選擇器（h1,p等）：用於選擇指定類型的HTML標籤；
2. 類選擇器（.classname）：用於選擇指定class的HTML標籤；
3. ID選擇器（#idname）：用於選擇指定id的HTML標籤；
4. 通配符選擇器（*）：用於選擇所有類型的HTML標籤；
5. 屬性選擇器（[foo=bar]）：用於選擇某屬性為指定值的HTML標籤；

和2種偽選擇器：

1. 偽類選擇器：用於選擇特定狀態的元素。
2. 偽元素選擇器：如:before,:first-letter，用於向某些選擇器設置特殊效果，以實現複雜的樣式。

還有各種組合選擇符（例如, +, >, ~），用來選擇擁有特定層級的元素。至於CSS選擇器發生衝突時它們的優先順序，參見另一篇文章： CSS規則的優先順序匹配

類型/類/ID

類型選擇器、類選擇器和ID選擇器是最常用的，不解釋了：

body{n margin: 20px;n}n.avatar{n width: 100px;n height: 100px;n}n#btn-save{n color: green;n}n

偽類

偽類（如:hover,:focus）是瀏覽器生成的，不出現在HTML文件中，通常用於標識用戶操作造成的元素狀態改變。

.avatar:hover{n cursor: pointer;n}n

偽類選擇器還有很多：

• :active：向被激活的元素添加樣式
• :focus：向擁有鍵盤輸入焦點的元素添加樣式
• :hover：當滑鼠懸浮在元素上方時，向元素添加樣式
• :link：向未被訪問的鏈接添加樣式
• :visited：向已被訪問的鏈接添加樣式
• :first-child：向元素的第一個子元素添加樣式
• :lang： 向帶有指定 lang 屬性的元素添加樣式

:first-child在表格上會很好用，比如我們希望表格的第一列高亮：

table tr td:first-child{n background: yellow;n}n

nth-child(an+b)是first-child的增強版，可用於在畫廊布局中清除浮動。 比如我們堆疊地顯示位置數目的塊每行顯示3個，那麼為了避免因高度不一致產生怪異的流式布局， 我們希望第3n+1個元素清除左浮動：

.block:nth-child(3n+1){n clear: left;n}n

注意nth-child是在Selectors Level 3才加入的，IE9一下不支持哦！

參考：

• CSS 偽類
• :nth-child - CSS

屬性

屬性選擇器 用來選擇特定屬性值的元素，例如div[class=avatar]可以選擇class屬性為avatar的<div>元素，當然HTML元素的屬性很多，屬性選擇器可以匹配任何屬性。 屬性選擇器還支持更複雜的匹配，例如：

• [src]：選擇所有定義了 src 屬性的元素
• [abc^="def"]：選擇 abc 屬性值以 "def" 開頭的所有元素
• [abc$="def"]：選擇 abc 屬性值以 "def" 結尾的所有元素
• [abc*="def"]：選擇 abc 屬性值中包含子串 "def" 的所有元素
• img[src|="figure"]：選擇 src 屬性的第一個單詞是 "figure" 的元素，例如 "figure-1", "figure-2"
• [title~=flower]：選擇 titile 屬性包含單詞 "flower" 的元素

組合選擇符

組合選擇符 可描述元素之間的層級關係，例如：A > B表示是A的子元素的所有B。組合選擇符也有很多：

• ul li：空格表示後代選擇器，選擇所有出現在ul上下文里的li；
• ul>li：>表示子元素選擇器，比後代選擇器縮小了範圍，只選擇（下一級）子元素；
• h1+p：+表示相鄰兄弟選擇器，選擇緊接在 h1 元素後出現的段落，h1 和 p 元素擁有共同的父元素；
• h1~p：~表示通用兄弟選擇器，同上，但 p 不一定是緊跟 h1。

有人認為,也屬於組合選擇符，我認為它只是方便寫CSS的一個語法，允許同時給多個選擇符定義一套樣式。

參考：

• CSS 元素選擇器

同時發表在：CSS選擇符總結

歡迎關注天碼營微信公眾號： TMY-EDU

小編重點推薦：

Spring MVC實戰入門訓練

Spring Data JPA實戰入門訓練

Java Web實戰訓練

Node.js全棧開發