# 2.2.4 選擇器 CSS 選擇器的語法規則： | 選擇器 | 例子 | 例子描述 | | :--- | :--- | :--- | | .class | .intro | 選擇 class="intro" 的所有節點。 | | \#id | \#firstname | 選擇 id="firstname" 的所有節點。 | | \* | \* | 選擇所有節點。 | | element | p | 選擇所有 p 節點。 | | element,element | div,p | 選擇所有 div 節點和所有 p 節點。 | | 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~=flower\] | 選擇 title 屬性包含單詞 "flower" 的所有節點。 | | :link | a:link | 選擇所有未被訪問的鏈接。 | | :visited | a:visited | 選擇所有已被訪問的鏈接。 | | :active | a:active | 選擇活動鏈接。 | | :hover | a:hover | 選擇鼠標指針位于其上的鏈接。 | | :focus | input:focus | 選擇獲得焦點的 input 節點。 | | :first-letter | p:first-letter | 選擇每個 p 節點的首字母。 | | :first-line | p:first-line | 選擇每個 p 節點的首行。 | | :first-child | p:first-child | 選擇屬于父節點的第一個子節點的每個 p 節點。 | | :before | p:before | 在每個 p 節點的內容之前插入內容。 | | :after | p:after | 在每個 p 節點的內容之后插入內容。 | | :lang\(language\) | p:lang | 選擇帶有以 "it" 開頭的 lang 屬性值的每個 p 節點。 | | element1~element2 | p~ul | 選擇前面有 p 節點的每個 ul 節點。 | | \[attribute^=value\] | a\[src^="https"\] | 選擇其 src 屬性值以 "https" 開頭的每個 a 節點。 | | \[attribute$=value\] | a\[src$=".pdf"\] | 選擇其 src 屬性以 ".pdf" 結尾的所有 a 節點。 | | \[attribute\*=value\] | a\[src\*="abc"\] | 選擇其 src 屬性中包含 "abc" 子串的每個 a 節點。 | | :first-of-type | p:first-of-type | 選擇屬于其父節點的首個 p 節點的每個 p 節點。 | | :last-of-type | p:last-of-type | 選擇屬于其父節點的最后 p 節點的每個 p 節點。 | | :only-of-type | p:only-of-type | 選擇屬于其父節點唯一的 p 節點的每個 p 節點。 | | :only-child | p:only-child | 選擇屬于其父節點的唯一子節點的每個 p 節點。 | | :nth-child\(n\) | p:nth-child | 選擇屬于其父節點的第二個子節點的每個 p 節點。 | | :nth-last-child\(n\) | p:nth-last-child | 同上，從最后一個子節點開始計數。 | | :nth-of-type\(n\) | p:nth-of-type | 選擇屬于其父節點第二個 p 節點的每個 p 節點。 | | :nth-last-of-type\(n\) | p:nth-last-of-type | 同上，但是從最后一個子節點開始計數。 | | :last-child | p:last-child | 選擇屬于其父節點最后一個子節點每個 p 節點。 | | :root | :root | 選擇文檔的根節點。 | | :empty | p:empty | 選擇沒有子節點的每個 p 節點（包括文本節點）。 | | :target | \#news:target | 選擇當前活動的 \#news 節點。 | | :enabled | input:enabled | 選擇每個啟用的 input 節點。 | | :disabled | input:disabled | 選擇每個禁用的 input 節點 | | :checked | input:checked | 選擇每個被選中的 input 節點。 | | :not\(selector\) | p:not | 選擇非 p 節點的每個節點。 | | ::selection | ::selection | 選擇被用戶選取的節點部分。 |