同级选择器_10-CSS3选择器详解
CSS3在CSS2基礎上，增強或新增了許多特性， 彌補了CSS2的眾多不足之處，使得Web開發(fā)變得更為高效和便捷。
CSS3的現狀
- 瀏覽器支持程度不夠好，有些需要添加私有前綴
- 移動端支持優(yōu)于PC端
- 不斷改進中
- 應用相對廣泛
應對的策略：漸進增強
- (1)堅持漸進增強的原則：讓低版本瀏覽器能正常訪問頁面，高版本的瀏覽器用戶體驗更好。【重要】
比如說，同樣是一個頭像，可能在低版本的瀏覽器中，頭像方的；在高版本的瀏覽器中，頭像是圓的。
- (2)考慮用戶群體。
- (3)遵照產品的方案。
參考鏈接：
- 漸進增強 VS 優(yōu)雅降級 | 簡書
- 漸進增強和優(yōu)雅降級之間的不同(面試題目)
瀏覽器的版本問題
由于CSS3普遍存在兼容性問題，為了避免因兼容性帶來的干擾，瀏覽器的建議版本為：
- Chrome瀏覽器 version 46+
- Firefox瀏覽器 firefox 42+
如何使用手冊
在查看CSS參考手冊時，需要注意以下符號：
比如說，{1,4}表示可以設置一至四個參數。
下面講CSS3的基礎知識。本文講一下 CSS3 選擇器的內容。
CSS3 選擇器
我們之前學過 CSS 的選擇器，比如：
``` div 標簽選擇器
.box 類名選擇器 #box id選擇器 div p 后代選擇器 div.box 交集選擇器 div,p,span 并集選擇器 div>p 子代選擇器 * : 通配符 div+p: 選中div后面相鄰的第一個p div~p: 選中的div后面所有的p```
CSS3新增了許多靈活查找元素的方法，極大的提高了查找元素的效率和精準度。CSS3選擇器與 jQuery 中所提供的絕大部分選擇器兼容。
屬性選擇器
屬性選擇器的標志性符號是 []。
匹配含義：
^：開頭 $：結尾 *：包含
格式：
- E[title] 選中頁面的E元素，并且E存在 title 屬性即可。
- E[]選中頁面的E元素，并且E需要帶有title屬性，且屬性值完全等于abc。
- E[attr~=val] 選擇具有 att 屬性且屬性值為：用空格分隔的字詞列表，其中一個等于 val 的E元素。
- E[attr|=val] 表示要么是一個單獨的屬性值，要么這個屬性值是以“-”分隔的。
- E[title^="abc"] 選中頁面的E元素，并且E需要帶有 title 屬性,屬性值以 abc 開頭。
- E[title$="abc"] 選中頁面的E元素，并且E需要帶有 title 屬性,屬性值以 abc 結尾。
- E[title*="abc"] 選中頁面的E元素，并且E需要帶有 title 屬性,屬性值任意位置包含abc。
比如說，我們用屬性選擇器去匹配標簽的className，是非常方便的。
這里我們用class屬性來舉例。代碼舉例：
```html
CSS3-屬性選擇器
簡介
- 姓名:
- 密碼:
- 性別: 男 女
- 興趣: 寫代碼
E[attr]
E[attr~=attr]
E[attr|=attr]
E[attr*=val]
E[attr^=val]
E[attr$=val]
```
最后來張表格：
結構偽類選擇器
偽類選擇器的標志性符號是 :。
CSS中有一些偽類選擇器，比如:link、:active、:visited、:hover，這些是動態(tài)偽類選擇器。
CSS3又新增了其它的偽類選擇器。這一小段，我們來學習CSS3中的結構偽類選擇器：即通過結構來進行篩選。
1、格式：(第一部分)
- E:first-child 匹配父元素的第一個子元素E。
- E:last-child 匹配父元素的最后一個子元素E。
- E:nth-child(n) 匹配父元素的第n個子元素E。注意，盒子的編號是從1開始算起，不是從0開始算起。
- E:nth-child(odd) 匹配奇數
- E:nth-child(even) 匹配偶數
- E:nth-last-child(n) 匹配父元素的倒數第n個子元素E。
理解：
(1)這里我們要好好理解父元素的含義，它指的是：以 E 元素的父元素為參考。
(2)注意：以上選擇器中所選到的元素的類型，必須是指定的類型E，如果選不中，則無效。這個要好好理解，具體可以看CSS參考手冊中的E:nth-child(n)的示例。我們可以理解成：先根據選擇器找到選中的全部位置，如果發(fā)現某個位置不是類型E，則該位置失效。
(3)另外，E:nth-child(n)這個屬性也很有意思。比如，針對下面這樣一組標簽：
html
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
上方代碼中：
- 如果選擇器寫成li:nth-child(2)，則表示第2個 li。
- 如果選擇器寫成li:nth-child(n)，則表示所有的li。因為此時的 n 表示 0,1,2,3,4,5,6,7,8.....(當n小于1時無效，因為n = 0 也是不會選中的)
- 如果選擇器寫成li:nth-child(2n)，則表示所有的第偶數個 li。
- 如果選擇器寫成li:nth-child(2n+1)，則表示所有的第奇數個 li。
- 如果選擇器寫成li:nth-child(-n+5)，則表示前5個 li。
- 如果選擇器寫成li:nth-last-child(-n+5)，則表示最后5個 li。
- 如果選擇器寫成li:nth-child(7n)，則表示選中7的倍數。。
上面列舉的選擇器中，我們只要記住： n 表示 0,1,2,3,4,5,6,7,8.....就很容易明白了。
2、格式：(第二部分)
- E:first-of-type 匹配同類型中的第一個同級兄弟元素E。
- E:last-of-type 匹配同類型中的最后一個同級兄弟元素E。
- E:nth-of-type(n) 匹配同類型中的第n個同級兄弟元素E。
- E:nth-last-of-type(n) 匹配同類型中的倒數第n個同級兄弟元素E。
既然上面這幾個選擇器帶有type，我們可以這樣理解：先在同級里找到所有的E類型，然后根據 n 進行匹配。
3、格式：(第三部分)
- E:empty 匹配沒有任何子節(jié)點(包括空格等text節(jié)點)的元素E。
- E:target 匹配相關URL指向的E元素。要配合錨點使用。
舉例：
我們可以把多個偽類選擇器結合起來使用，比如：
如果想把上圖中，第一行的前三個 span 標紅，我們可以這樣使用結構偽類選擇器：
css dt:first-child span:nth-of-type(-n+3) { color: red; }
最后來張表格：
偽元素選擇器
偽元素選擇器的標志性符號是 ::。
1、格式：(第一部分)
- E::before 設置在 元素E 前面(依據對象樹的邏輯結構)的內容，配合content屬性一起使用。
- E::after 設置在 元素E 后面(依據對象樹的邏輯結構)的內容，配合content屬性一起使用。
E:after、E:before在舊版本里是偽類，在 CSS3 這個新版本里是偽元素。新版本里，E:after、E:before會被自動識別為E::after、E::before，按偽元素來對待，這樣做的目的是用來做兼容處理。
舉例：
```html
生命壹號
```
效果如下：
上圖可以看出：
- 通過偽元素選擇器，就可以添加出類似于span標簽的效果(記得要結合 content 屬性使用)。
- 通過這兩個屬性添加的偽元素，是行內元素，需要轉換成塊元素才能設置寬高。
2、格式：(第二部分)
- E::first-letter 設置元素 E 里面的第一個字符的樣式。
- E::first-line 設置元素 E 里面的第一行的樣式。
- E::selection 設置元素 E 里面被鼠標選中的區(qū)域的樣式(一般設置顏色和背景色)。
E::first-letter 的舉例：
E::first-line的舉例：
最后來張表格：
總結
以上是生活随笔為你收集整理的同级选择器_10-CSS3选择器详解的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 开通 Apple Pay 交通卡时有哪些
- 下一篇： 米游社如何改昵称