21、 x::pseudoelement 偽元素選擇器
我們可以使用偽元素（用::表示）來定義某些片段元素，比如第一行或第乙個字母。要記住的是這只能用於塊狀（block）元素。
比如我們要匹配第乙個字母：
p::first-letter
上述**會匹配所有的p標籤，然後匹配所有段落開頭的第乙個字母。一般用於比較個性的類似雜誌排版風格的**。
比如我們要匹配段落的第一行內容：
p::first-line
這裡使用::first-line來定義段落的第一行的樣式。
為了相容現有的樣式標準，css1和css2裡使用單冒號來表示偽元素（比如:first-line，:first-letter，:before和:after）
瀏覽器相容性
ie6+
firefox
chrome
safari
opera
常用寫法示例：
li:nth-child(3)
奇數樣式匹配：
li:nth-child(odd)
瀏覽器相容性
ie9+
firefox 3.5+
chrome
safari
23、 x:nth-last-child(n) ：從後往前計算選擇每第 n 個元素選擇器
x:nth-last-child(n) 與 x:nth-child(n) 相反，這裡從後往前數，比如你的元素很多，你不會乙個乙個從前往後數吧，li:nth-child(397)，使用 nth-last-child 這個偽類更會方便些
**示例：
li:nth-last-child(2)
瀏覽器相容性
ie9+
firefox 3.5+
chrome
safari
opera
24. x:nth-of-type(n)：選擇每第n個某種元素選擇器
有時候你可能有這樣的需求，想通過元素型別type進行選擇，而不是子元素 child，你可以考慮 x:nth-of-type(n)，假設有5個無序列表。如果你想定義第三個ul的樣式，但又沒有id來進行匹配，那麼可以使用偽類nth-of-type(n)。你的**可以這麼寫：
ul:nth-of-type(3)
瀏覽器相容性
ie9+
firefox 3.5+
chrome
safari
25. x:nth-last-of-type(n)：從後往前計算選擇每第n個某種元素選擇器
比如我們可以使用nth-last-of-type來選擇倒數第n個元素。如下段**所示：
ul:nth-last-of-type(3)
瀏覽器相容性
ie9+
firefox 3.5+
chrome
safari
opera
26. x:first-child：第乙個子元素選擇器
這個選擇器通常選擇第乙個子元素，我們常常為第乙個或者最後選項卡設定預設的視覺效果，比如去掉元素的邊框，示例**如下：
ul >li:first-child
假設你有乙個序列，每一行的元素都有上邊框border-top和下邊框border-bottom。這樣的話第乙個和最後乙個元素並不需要這麼設定區分分割線。我們會通過給第乙個和最後乙個元素新增樣式來解決。稍後我會給到示例。
瀏覽器相容性
ie7+
firefox
chrome
safari
opera
27. x:last-child：最後乙個子元素選擇器
有第乙個子元素選擇器，自然會有最後乙個子元素選擇器，示例**如下：
ul > li:last-child
比如下面乙個例子，我們建立乙個無序列表的樣式，需要加上邊框的深度，讓層次更明顯（分割線），又不想讓第乙個元素上邊框和最後乙個元素下邊框有線條的感覺，這兩個偽類就派上用場了，示例**如下：
效果如下：
瀏覽器相容性
ie9+
firefox
chrome
safari
opera
28：x:only-child ：選擇唯一的子元素
這個偽類一般不常用，only-child可以讓你匹配唯一的子元素，比如，選擇當div中只有乙個p子元素的時候段落字型才是紅色的，只要子元素超過乙個就不會應用樣式。示例**如下：
my paragraph here.
/*只有這行應用樣式*/
two paragraphs total.
two paragraphs total.
瀏覽器相容性
ie9+
firefox
chrome
safari
opera
29：x:only-of-type：匹配父元素裡沒有鄰近兄弟元素的選擇器
only-of-type會匹配父元素裡沒有鄰近兄弟元素的子元素（即同胞中唯一的那種元素，沒有兄弟）。例如，匹配所有只有乙個列表元素的 li 和 div裡只有乙個p標籤 讓其應用樣式，示例**如下
my paragraph here.
two paragraphs total.
two paragraphs total.
示例效果如下：
瀏覽器相容性
ie9+
firefox 3.5+
chrome
safari
opera
30：x:first-of-type：選擇該型別的第乙個元素選擇器
我們通常用這個選擇器來選擇該型別的第乙個元素，為了更好的理解這個例子，我們來看如下結構的html**：
my paragraph here.
比如我們有乙個這樣的需求? 怎麼選中"list item 2"。先別著急往下看？你會如何做呢？
實現的方法比較多，如下所示：
方案1ul:first-of-type > li:nth-child(2)
上述**，首先找到頁面中的第乙個無序列表，然後找到它的直接子元素，然後選擇第二個元素。
方案2 ：
使用緊鄰同胞選擇器
p + ul li:last-child
上述**先找到緊跟在p後面的ul，然後找到li序列的最後的元素。
方案3：
多種選擇器的組合，示例**如下：
ul:first-of-type li:nth-last-child(1)
上述我們先找到頁面的第乙個ul，然後找到li序列的倒數第乙個元素。
瀏覽器相容性
ie9+
firefox 3.5+
chrome
safari
opera
專注分享當下最實用的前端技術。關注前端達人，與達人一起學習進步！
長按關注"前端達人"
css的9個常用選擇器
1.類選擇器 通過類名進行選擇 複製 這是類選擇器 hello world 複製 效果圖 2.id選擇器 通過id進行選擇 複製 這是id選擇器 複製 效果圖 3.標籤選擇器 通過id進行選擇 複製 這是標籤選擇器 複製 效果圖 4.分組選擇器 可一次選擇多個標籤以設定相同樣式 複製 這是分組選擇器...
CSS3 0 選擇器和一些屬性
p lang it 選擇帶有以 it 開頭的 lang 屬性值的每個 元素。p ul 選擇前面有 元素的每個 元素。a src https 選擇其 src 屬性值以 https 開頭的每個 元素。a src pdf 選擇其 src 屬性以 pdf 結尾的所有 元素。a src abc 選擇其 src...
nth child 乙個CSS樣式選擇器
nth child 2n 是css的乙個選擇器，對於在dom樹中有an b 1個兄弟節點的元素，通過 nth child可以選擇哪些元素應用樣式。這些兄弟節點中編號從1開始。語法 element nth child an b 表示element對應的元素中，第an b n可以使任意整數 個元素應用該...