前言

css選擇器非常之多，常見的如class選擇器，id選擇器，標籤選擇器等等。每個的用法都有所區別，雖然很多都能到達同樣的效果，但還是有一些更優的選擇。

class、id、標籤選擇器

這個幾個就不細説了，class和標籤選擇器主要用來設置樣式上面，id選擇器推薦不要用在css樣式上，更多是用在js操作dom時，選擇元素。
如：

div{
    background: #fff;}.list {
    color: red;}

$('#li').html('<span>web秀</span>')

element element

div p選擇<div>元素內部的所有<p>元素。

element>element

div>p選擇父元素為<div>元素的所有<p>元素。

element+element

div+p選擇緊接在<div>元素之後的所有<p>元素。

[attribute]

[target]選擇帶有 target 屬性所有元素。

[attribute=value]

[target=_blank]選擇 target="_blank" 的所有元素。

[attribute~=value]

[title~=title]選擇 title 屬性包含單詞 “flower” 的所有元素。

[attribute|=value]/[attribute^=value]

[lang|=en]選擇 lang 屬性值以 “en” 開頭的所有元素。

[attribute$=value]

p[src$="e"]選擇其 src 屬性以 “e” 結尾的所有<p>元素。

[attribute*=value]

p[title*="abc"]選擇其 title 屬性中包含 “abc” 子串的每個<p>元素。

element1~element2

p~div選擇前面有<p>元素的每個<div>元素。

A標籤偽類選擇器

:linka:link 所有未被訪問的鏈接(a標籤的默認樣式)。

:visiteda:visited 所有已被訪問的鏈接。

:activea:active 點擊後沒有鬆開鼠標的鏈接。

:hovera:hover 鼠標指針位於其上的鏈接。

:before / :after

在元素的內容之前插入內容。

div:before{
    content: '';
    display: block;
    background: red;
    width: 30px;
    height: 10px;}div:after{
    content: '';
    display: block;
    background: green;
    width: 30px;
    height: 10px;}

:first-child

p:first-child匹配的是某父元素的第一個子元素，可以説是結構上的第一個子元素。(注意和:first-of-type做區分)

:first-of-type

p:first-of-type匹配的是該類型的第一個，類型是指什麼呢，就是冒號前面匹配到的東西，比如 p:first-of-type，就是指所有p元素中的第一個。這裏不再限制是第一個子元素了，只要是該類型元素的第一個就行了，當然這些元素的範圍都是屬於同一級的，也就是同輩的。(注意和:first-child做區分)

:last-child

p:last-child表示其父元素的最後一個子元素，且這個元素是css指定的元素，才可以生效(注意和:last-of-type做區分)

:last-of-type

p:last-of-type代表在一羣兄弟元素中的最後一個指定類型的元素。(注意和:last-child做區分)

:only-child

p:only-child選擇器選擇的是父元素中只有一個子元素，而且只有唯一的一個子元素

:only-of-type

p:only-of-type表示一個元素他有很多個子元素，而其中只有一種類型的子元素是唯一的

:nth-child(n)

p:nth-child(2)選擇屬於其父元素的第二個子元素的每個<p>元素。

:nth-child(odd)或者:nth-child(2n+1)奇數行、:nth-child(even)或者:nth-child(2n+2)偶數行

:nth-last-child(n)

p::nth-last-child(n)同上，從最後一個子元素開始計數。

:empty

p:empty選擇沒有子元素的每個<p>元素（包括文本節點）。

:not(selector)

:not(p)選擇非<p>元素的每個元素。

input狀態選擇器

:focus獲得焦點的 input 元素

:enabled每個啓用的 input 元素

:disabled每個禁用的 input 元素

:checked每個被選中的 input 元素