在CSS中，選擇器是選取需設定樣式的元素的模式；css選擇器指明了css樣式的作用對象，即「樣式」作用於網頁中的哪些元素，語法格式「選擇器{樣式}」。 HTML頁面中的元素就是透過CSS選擇器來控制的。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
在 CSS 中，選擇器是選取需要設定樣式的元素的模式。
要使用css對HTML頁面中的元素實作一對一，一對多或多對一的控制，這就需要用到CSS選擇器。 HTML頁面中的元素就是透過CSS選擇器來控制的。
每一條css樣式定義由兩個部分組成，形式如下： [code] 選擇器{樣式} [/code] 在{}之前的部分就是「選擇器」。 「選擇器」指明了{}中的「樣式」的作用對象，也就是「樣式」作用於網頁中的哪些元素。
css有哪些選擇器
#| 選擇器 | 範例 | 範例描述 |
|---|---|---|
| .class | #.intro | 選擇class="intro" 的所有元素。 |
| .class1.class2 | #.name1.name2 | 選擇class 屬性中同時有name1 和name2 的所有元素。 |
| .class1 .class2 | #.name1 .name2 | 選擇作為類別名稱name1 元素後代的所有類別名稱name2 元素。 |
| #id | #firstname | 選擇 id="firstname" 的元素。 |
| * | * | 選擇所有元素。 |
| element | p | #選擇所有 元素。 |
| element.class | #p.intro | 選擇class="intro" 的所有 元素。 |
| element,element | #div, p | 選擇所有 元素和所有 元素。 |
| element element | #div p | 選擇 元素內的所有< ;p> 元素。 |
| element>element | #div > p | 選擇父元素是< div> 的所有 元素。 |
| element element | #div p | 選擇緊接 元素的首個 元素。 |
| element1~element2 | #p ~ ul | 選擇前面有 元素的每個
|
| [attribute] | [target] | 選擇所有帶有 target 屬性的元素。 |
| [attribute=value] | [target=_blank] | 選擇帶有target ="_blank" 屬性的所有元素。 |
| [attribute~=value] | [title~=flower] | 選擇title屬性包含單字"flower" 的所有元素。 |
| [attribute|=value] | [lang|=en] | 選擇lang屬性值以"en" 開頭的所有元素。 |
| [attribute^=value] | a[href^="https"] | 選擇其src 屬性值以"https" 開頭的每個 元素。 |
| [attribute$=value] | a[href$=".pdf"] | 選擇其src 屬性以".pdf" 結尾的所有 元素。 |
| [attribute*=value] | a[href*="w3schools"] | #選擇其href 屬性值中包含"abc" 子字串的每個 元素。 |
| :active | a:active | 選擇活動連結。 |
| ::after | p::after | 在每個 的內容之後插入內容。 |
| ::before | p::before | 在每個 的內容之前插入內容。 |
| :checked | input:checked | 選擇每個被選取的 元素。 |
| :default | input:default | #選擇預設的 元素。 |
| :disabled | input:disabled | 選擇每個被停用的 元素。 |
| :empty | p:empty | #選擇每個沒有子元素的 元素（包括文字節點）。 |
| :enabled | input:enabled | 選擇每個啟用的 元素。 |
| :first-child | p:first-child | 選擇每個屬於父元素的子元素的每個 元素。 |
| ::first-letter | p::first-letter | 選擇每個 元素的首字母。 |
| ::first-line | p::first-line | 選擇每個 元素的首行。 |
| :first-of-type | p:first-of-type | 選擇屬於其父元素的首個 元素的每個 元素。 |
| :focus | input:focus | #選擇獲得焦點的 input 元素。 |
| :fullscreen | :fullscreen | 選擇處於全螢幕模式的元素。 |
| :hover | a:hover | 選擇滑鼠指標位於其上的連結。 |
| :in-range | input:in-range | 選擇其值在指定範圍內的 input 元素。 |
| :indeterminate | input:indeterminate | 選擇處於不確定狀態的 input 元素。 |
| :invalid | input:invalid | 選擇所有具有無效值的 input 元素。 |
| :lang(language) | p:lang(it) | 選擇lang 屬性等於"it"（義大利）的每個 元素。 |
| :last-child | p:last-child | #選擇屬於其父元素最後一個子元素每個 元素。 |
| :last-of-type | p:last-of-type | 選擇屬於其父元素的最後 元素的每 元素。 |
| :link | a:link | 選擇所有未造訪過的連結。 |
| :not(selector) | :not(p) | #選擇非 元素的每個元素。 |
| :nth-child(n) | p:nth-child(2) | 選擇屬於其父元素的第二個子元素的每個 元素。 |
| :nth-last-child(n) | p:nth-last-child(2) | 同上，從最後一個子元素開始計數。 |
| :nth-of-type(n) | p:nth-of-type(2) | 選擇屬於其父元素第二個 元素的每個 元素。 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 同上，但是從最後一個子元素開始計數。 |
| :only-of-type | p:only-of-type | 選擇屬於其父元素唯一的 元素的每 元素。 |
| :only-child | p:only-child | 選擇屬於其父元素的唯一子元素的每個 元素。 |
| :optional | input:optional | 選取不含 "required" 屬性的 input 元素。 |
| :out-of-range | input:out-of-range | 選擇值超出指定範圍的 input 元素。 |
| ::placeholder | input::placeholder | 選擇已規定 "placeholder" 屬性的 input 元素。 |
| :read-only | input:read-only | 選擇已規定 "readonly" 屬性的 input 元素。 |
| :read-write | input:read-write | 選擇未規定 "readonly" 屬性的 input 元素。 |
| :required | input:required | 選擇已規定 "required" 屬性的 input 元素。 |
| :root | :root | 選擇文件的根元素。 |
| ::selection | ::selection | 選擇使用者已選取的元素部分。 |
| :target | #news:target | #選擇目前活動的 #news 元素。 |
| :valid | input:valid | #選擇所有帶有有效值的 input 元素。 |
| :visited | a:visited | 選擇所有已造訪的連結。 |
（學習影片分享：css影片教學）
以上是css選擇器是什麼意思的詳細內容。更多資訊請關注PHP中文網其他相關文章！
