CSS3學習筆記（一）：選擇器

時間 2019-12-09

標籤 css3 css 學習筆記選擇器欄目 CSS 简体版

原文原文鏈接

屬性選擇器

在CSS3之前，若是須要選擇選擇某個/類元素的話，通常會使用id/class來進行選擇，CSS3則提供了更強大的功能，能夠根據元素中的某個屬性，從而選中該元素。具體以下：css

E[attr]：屬性名爲 attr 的全部 E 元素學習
E[attr="value"]：屬性 attr 的屬性值爲 value 的全部 E 元素spa
E[attr~="value"]：屬性值(>=1)中包含 value 的ssr
E[attr^="value"]：屬性值是以 value 開頭的code
E[attr$="value"]：屬性值是以 value 結束的圖片
E[attr*="value"]屬值中包含了 value的文檔
E[attr|="value"]：屬性值是 value 或者以 value- 開頭的值get

【備註】 IE7及以上支持。it

就我我的而言，做爲初學者，前兩個比較容易理解。其餘幾個當中，須要注意的幾點：io

E[attr~="value"]和E[attr*="value"]：~=是指某屬性可能包含一個或多個屬性值，只要該屬性中包含特定 value 的，即知足條件，後者是指屬性值中的一部分等於 value 便可。
E[attr|="value"]：以 value- 開頭，而不是以 value 開頭，注意連詞符-的存在。

僞類選擇器

在CSS3之前，已經有了一些僞類選擇器，如 CSS1 中的:hover、:visited， CSS2 中的:after、:before等等，CSS3 繼續將之發揚光大。

結構性僞類選擇器

E:nth-child(n)：表示 E 的父元素中第 n 個子節點，n 的值能夠是：
- n：從1開始的整數；
- odd/2n-1：表示 E 的父元素中全部奇數子節點
- even/2n：表示 E 的父元素中全部偶數子節點
E:nth-last-child(n)：表示 E 的父元素中倒數第 n 個子節點
E:nth-of-type(n)：表示 E 的父元素中第 n 個類型爲 E 的字節點
E:nth-last-of-type(n)：表示 E 的父元素中倒數第 n 個類型爲 E 的子節點
E:empty：表示E元素中沒有子節點。
E:first-child：表示 E 的父元素中第一個子節點
E:last-child：表示 E 的父元素中最後一個子節點
E:first-of-type：表示 E 的父元素中第一個類型爲 E 的子節點
E:last-of-type：表示 E 的父元素中最後一個類型爲 E 的子節點
E:only-child：表示 E 的父元素中只有一個子節點。
E:only-of-type：表示 E 的父元素中有且只有一個子節點，且這個惟一的子節點的類型必須是 E 。

【備註】 兼容性以下：

*在學習的時候，初學者可能會有點混淆（尤爲是非科班出身的，好比我QAQ），甚至難以理解這一選擇器的原理。這裏只須要稍微瞭解一下 DOM 的基本知識，知道節點的概念就能明白。
首先，在這裏，子節點指的是元素節點，計算時從1開始計數（而非0），且計算時不包括文本節點。因爲 DOM 的樹狀結構特性，當咱們須要查找符合條件的 E 元素時，好比元素，咱們也許有多種方法進行查找，這種選擇器的方法是：首先查找元素，而後查找含有元素的父級，假設是<body>元素，而後在<body>元素中查找全部知足條件的元素。總結一下，就是「子——父——子」的查找順序，至於爲何按照這樣的查找順序，背後的原理我也不太瞭解，所以對於第一步，是查找全部的元素，仍是在相同層級的節點上只須要找到一個元素便可？這個問題我也不太清楚。*