玩過前端的一般都會接觸CSS選擇器 。在CSS中，選擇器是選取需設置樣式的元素的模式 。
CSS選擇器可以分成這些大類：

1. 基本選擇器
2. 復合選擇器
3. 偽類選擇器
4. 偽元素選擇器

每個大類中又可以細分一些具體的選擇器 。
1.1 基本選擇器-通配選擇器通配符選擇器常用 “*”號表示，它是所有選擇器里作用范圍最廣的，能匹配所有的HTML元素 。
語法：
{屬性名: 屬性值;}舉例：

文章插圖
通配選擇器
最終效果：

文章插圖
最終效果
初看感覺這個通配選擇器很雞肋，但是到后面清除樣式時，會起到比較大的作用，暫時先不用管，只要了解一下有這個選擇器就行 。
1.2 基本選擇器-元素選擇器元素選擇器是指用HTML標簽名稱作為選擇器，按標記元素分類，為頁面中某一類標簽指定統(tǒng)一的CSS樣式 。
語法：
標簽名 {屬性名: 屬性值;}舉例：

文章插圖
元素選擇器
最終效果：

文章插圖
最終效果
元素選擇器最大的優(yōu)勢是能快速為頁面中同類型的標簽統(tǒng)一樣式，同時這也是它的缺點，不能實現差異化設置 ， 就像上面的例子，所有p標簽都受到了影響 。
1.3 基本選擇器-類選擇器類選擇器的作用是根據元素的class值，來選中某些元素 。
語法：
.類名 {屬性名: 屬性值;}舉例：

文章插圖
類選擇器
最終效果：

文章插圖
最終效果
類選擇器有這些注意事項：

1. 元素的class屬性值不帶“.”，但是CSS的類選擇器要帶“.”；
2. class值，是我們自定義的，按照標準，不要使用純數字、不要使用中文、盡量使用英文與數字的組合，若由多個單詞組成，使用-做連接，例如：left-menu，且命名要有意義，做到“見名知意”；
3. 一個元素不能寫多個class屬性；
4. 一個元素的class屬性，能寫多個值，要用空格隔開 。

1.4 基本選擇器-id選擇器id選擇器的作用是根據元素的id屬性值，來準確的選中某一個元素 。
語法：
#id值 {屬性名: 屬性值;}舉例：

文章插圖
id選擇器
最終效果：

文章插圖
最終效果
id選擇器有這些注意事項：

1. id屬性值盡量由字母、數字、下劃線(_)、短杠(-)組成，最好以字母開頭，不要包含空格、區(qū)分大小寫；
2. 一個元素只能擁有一個id屬性，多個元素的id屬性值不能相同；
3. 一個元素可以同時擁有id和class屬性 。

有些較真的同學可能會說多個元素寫了相同的id，瀏覽器也能正常渲染 。但是實際工作開發(fā)中一般都需要用js寫一些具體的業(yè)務邏輯 ， 這個時候遇到兩個擁有相同id的元素，就會比較崩潰 。
2.1 復合選擇器-交集選擇器交集選擇器的作用是選中同時符合多個條件的元素 。交集有并且的含義，通俗理解：即…又…
語法：
選擇器1選擇器2選擇器3...選擇器n {屬性名: 屬性值;}舉例：

文章插圖
交集選擇器
最終效果：

文章插圖
最終效果
交集選擇器有這些注意事項：

1. 有標簽名，標簽名必須寫在前面；
2. id選擇器理論上可以作為交集選擇器的條件，但實際應用中幾乎不用，因為沒有意義；
3. 交集選擇器中不可能出現兩個元素選擇器，因為一個元素 ， 不可能即是p元素又是span元素；
4. 用的最多的交集選擇器是：元素選擇器配合類名選擇器，例如上面例子中 h2.backend

2.2 復合選擇器-并集選擇器并集選擇器的作用是選中多個選擇器對應的元素，又稱分組選擇器 。所謂并集就是或者的含義，通俗理解：要么…要么
語法：
選擇器1,選擇器2,選擇器3,選擇器n {屬性名: 屬性值;}舉例：

文章插圖
并集選擇器
最終效果：

文章插圖
最終效果
并集選擇器有這些注意事項：

1. 并集選擇器一般豎著寫；
2. 任何形式的選擇器 ， 都可以作為并集選擇器的一部分；
3. 并集選擇器，通常用于集體聲明，可以縮小樣式表體積 。

2.3 復合選擇器-后代選擇器后代選擇器的作用是選中指定元素中，符合要求的后代元素 。
語法：
選擇器1 選擇器2 選擇器3 選擇器n {屬性名: 屬性值;}舉例：

文章插圖
后代選擇器
最終效果：

文章插圖
最終效果
后代選擇器有幾個注意事項：

1. 后代選擇器，最終選擇的是后代，不會將過程中的祖先一起選中；
2. 兒子、孫子、重孫子，都算是后代；
3. 結構一定要復合的 HTML 嵌套要求，例如：不能 p 中寫 h1 ~ h6。

2.4 復合選擇器-子代選擇器子代選擇器的作用是選中指定元素中符合要求的子元素（兒子元素） 。
語法：
選擇器1>選擇器2>選擇器3>... 選擇器n {屬性名: 屬性值;}舉例：

文章插圖
子代選擇器
最終效果：

文章插圖
最終效果
子代選擇器有以下注意點：

1. 子代選擇器，最終選中的是子代，不是父級；
2. 子、孫子、重孫子、重重孫子…統(tǒng)稱后代 ， 子就是指兒子 。（和后代選擇器的區(qū)別）

2.5 復合選擇器-相鄰兄弟選擇器相鄰兄弟選擇器的作用是選中指定元素后，符合條件的相鄰兄弟元素 。
所謂相鄰，就是緊挨著該元素的下一個，可以理解成睡在我下鋪的兄弟 。
語法：
選擇器1+選擇器2 {屬性名: 屬性值;}舉例：

文章插圖
相鄰兄弟選擇器
最終效果：

文章插圖
最終效果
有一點需要注意，相鄰兄弟選擇器選擇的是下面的兄弟 。
2.6 復合選擇器-通用兄弟選擇器通用兄弟選擇器的作用是選中指定元素后，符合條件的所有兄弟元素 ?？梢岳斫獬呻m在我下鋪的所有兄弟 。
語法：
選擇器1~選擇器2 {屬性名: 屬性值;}舉例：

文章插圖
通用兄弟選擇器
最終效果：

文章插圖
最終效果
也需要注意，通用兄弟選擇器選擇的是下面的兄弟，和相鄰兄弟選擇器是一樣的 。
2.7 復合選擇器-屬性選擇器屬性選擇器的作用是選中屬性符合一定要求的元素 。
語法：
# 選中具有某個屬性的元素[屬性名] {屬性名: 屬性值;}# 選中包含某個屬性，且屬性值等于指定值的元素[屬性名="值"] {屬性名: 屬性值;}# 選中包含某個屬性 ， 且屬性值以指定的值開頭的元素[屬性名^="值"] {屬性名: 屬性值;}# 選中包含某個屬性，且屬性值以指定的值結尾的元素[屬性名$="值"] {屬性名: 屬性值;}# 選中包含某個屬性，且屬性值包含指定值的元素[屬性名*="值"] {屬性名: 屬性值;}舉例：

文章插圖
屬性選擇器
最終效果：

文章插圖
最終效果
3 偽類選擇器偽類選擇器的作用是選中特殊狀態(tài)的元素 。其中偽是指虛假的，不是真的 。所以偽類可以理解成像類（class），但不是類，是元素的一種特殊狀態(tài) 。
3.1 偽類選擇器-動態(tài)偽類是比較常用的偽類選擇器類型 。
語法：
:link超鏈接未被訪問的狀態(tài):visited超鏈接訪問過的狀態(tài):hover鼠標懸停在元素上的狀態(tài):active元素激活的狀態(tài):focus獲取焦點的元素舉例：

文章插圖
動態(tài)偽類
最終效果：

文章插圖
最終效果
3.2 偽類選擇器-結構偽類結構偽類之所以這樣命名 ， 是因為需要先確定元素結構，根據結構選擇特定的元素 。
常用的語法：
:first-child 所有兄弟元素中的第一個:last-child 所有兄弟元素中的最后一個:nth-child(n) 所有兄弟元素中的第n個:first-of-type 所有同類型兄弟元素中的第一個:last-of-type 所有同類型兄弟元素中的最后一個:nth-of-type(n) 所喲同類型兄弟元素中的第n個:nth-last-child(n) 所有兄弟元素中的倒數第n個:nth-last-of-type(n) 所有同類型兄弟元素中的倒數第n個:only-child 選擇沒有兄弟的元素（獨生子女）:only-of-type 選擇沒有同類型兄弟的元素:root 根元素:empty 內容為空元素（空格也算內容）關于n的值：

1. 0或不寫：什么都選不中 — 幾乎不用；
2. n：選中所有子元素 — 幾乎不用；
3. 1~正無窮的整數：選中所對應序號的子元素；
4. 2n 或 even：選中序號為偶數的子元素；
5. 2n+1 或 odd：選中序號為奇數的子元素；
6. -n+3：選中前3個 。

舉例：

文章插圖
結構偽類
最終效果：

文章插圖
最終效果
3.3 偽類選擇器-否定偽類否定偽類的作用是排除滿足條件的元素 。
語法：
:not(選擇器)排除滿足括號中條件的元素舉例：

文章插圖
否定偽類
最終效果：

文章插圖
最終效果
3.4 偽類選擇器-UI偽類用來選中特定狀態(tài)的UI，和前面介紹的動態(tài)偽類有點類似 。
語法：
:checked 被選中的復選框或單選按鈕:enable 可用的表單元素（沒有disabled屬性）:disabled 不可用的表單元素（有disabled屬性）舉例：

文章插圖
UI偽類
最終效果：

文章插圖
沒選中狀態(tài)

文章插圖
選中狀態(tài)
3.5 偽類選擇器-目標偽類目標偽類的作用是選中錨點指向的元素 。
語法：
:target 選中錨點指向的元素舉例：

文章插圖
目標偽類
最終效果：

文章插圖
最終效果
3.6 偽類選擇器-語言偽類語言偽類的作用是選中特定語言的目標 ， 當然不是根據內容自動判定語言類型，而是通過lang這個屬性 。
語法：
:lang() 根據指定的語言選擇元素（本質是看lang屬性的值）舉例：

文章插圖
語言偽類
最終效果：

文章插圖
最終效果
4 偽元素選擇器偽元素選擇器的作用是選中元素中的一些特殊位置 。
常用偽元素：
::first-letter 選中元素中的第一個文字::first-line 選中元素中的第一行文字::selection 選中被鼠標選中的內容::placeholder 選中輸入框的提示文字::before 在元素最開始的位置，創(chuàng)建一個子元素（必須用content屬性指定內容）::after 在元素最后的位置，創(chuàng)建一個子元素（必須用content屬性指定內容）舉例：

文章插圖
偽元素選擇器
最終效果：

文章插圖
最終效果
總結【css所有標簽及其屬性匯總 css奇數偶數選擇器】以上就是CSS選擇器的介紹，初看好像很多 ， 不過多用幾次很快就能記住 。CSS選擇器的功能非常豐富，合理使用合適的選擇器，會讓代碼的可靠性得到保障 。

以上關于本文的內容，僅作參考！溫馨提示：如遇健康、疾病相關的問題，請您及時就醫(yī)或請專業(yè)人士給予相關指導!

「愛刨根生活網」www.malaban59.cn小編還為您精選了以下內容，希望對您有所幫助：

• 如何在360瀏覽器中允許所有網站運行 JavaScript
• 如何在CSS3中使用樣式屬性控制label標簽寬度
• HTML5中article標簽的優(yōu)勢及兼容性分析
• 提升網站SEO效果的關鍵：合理運用meta標簽
• 如何在Excel中恢復丟失的Sheet標簽
• 盤點OPPO的所有手機 oppo手機
• Python如何讓Matplotlib中X軸的標簽居中顯示
• PR如何使用Ctrl Shift K快速剪切所有軌道素材的位置
• 出馬仙所有名字大全 全部仙家的名字
• 如何使用永中Office設置PPT餅圖標簽