本博文介紹CSS中的基礎選擇器和復合選擇器，
基礎選擇器包括標簽選擇器、類選擇器、id選擇器和通配符選擇器，復合選擇器包括后代選擇器、子選擇器、并集選擇器和偽類選擇器，
1 基礎選擇器
基礎選擇器由單個選擇器組成，包括：標簽選擇器、類選擇器、id選擇器和通配符選擇器，
1.1 標簽選擇器
標簽選擇器通過單個元素標簽（如p、div、h1）選擇對應的元素，使用標簽選擇器會選擇到所有的對應標簽，
使用格式：
標簽名{ 屬性1: 屬性值1; 屬性2: 屬性值2; }
使用實體：
div{ height: 100px; width: 100px; }
實體作用：將所有的 div 元素的高（height）和寬（width）設定為100px
1.2 類選擇器
類選擇器通過元素的類名（class）對元素進行選擇，可以選擇到一個或者多個元素標簽，該選擇器在開發中最常用，
使用格式：
.類名{ 屬性1: 屬性值1; 屬性2: 屬性值2; }
使用實體：
.red-box{ color: red; }
實體作用：將類名為"red-box"的元素中的字體顏色（color）設定為紅色（red）
1.3 id選擇器
id 選擇器通過元素的 id 對元素進行選擇，該選擇器只能選擇到一個元素標簽（因為元素的 id 是唯一的），id 選擇器經常和 js 搭配使用，
使用格式：
#id值{ 屬性1: 屬性值1; 屬性2: 屬性值2; }
使用實體：
#content_left{ text-align: left; }
實體作用：將 id 為"content_left"的元素中的文字內容設定左對齊（text-align: left;）
1.4 通配符選擇器
通配符選擇器可以選擇頁面中的所有元素，在去除掉頁面中的默認樣式時有很好的作用，
使用格式：
*{ 屬性1: 屬性值1; 屬性2: 屬性值2; }
使用實體：
*{ margin: 0; padding: 0; }
實體作用：將頁面中所有元素的外邊距（margin）和內邊距（padding）都設定為0（此實體使用頻率很高）
2 復合選擇器
復合選擇器由多個基礎選擇器組成，常用的包括：后代選擇器、子選擇器、并集選擇器和偽類選擇器，
2.1 后代選擇器
后代選擇器可以選擇某個元素的所有后代元素（包括兒子元素、孫子元素等），
使用格式：
元素1 元素2 元素3{ 樣式 }
注意：
（1）元素和元素之間用空格隔開；
（2）元素1、元素2、元素3...為基礎選擇器（標簽選擇器、類選擇器、id選擇器等），
使用實體：
div p{ color: red; }
實體作用：將所有 div 元素的所有子元素 p 中的字體顏色（color）設定為紅色（red）
2.2 子選擇器
子選擇器可以選擇某個元素的最近一級子元素（只包括兒子元素，不包括孫子元素等），
使用格式：
元素1 > 元素2{ 樣式 }
注意：
（1）元素和元素之間用 > 隔開；
（2）元素1、元素2...為基礎選擇器（標簽選擇器、類選擇器、id選擇器等），
使用實體：
div > p{ color: red; }
實體作用：將所有 div 元素的所有兒子元素 p 中的字體顏色（color）設定為紅色（red）
2.3 并集選擇器
并集選擇器可以選擇多組元素并設定相同的樣式，
使用格式：
元素1, 元素2{ 樣式 }
注意：
（1）元素和元素之間用 , 隔開；
（2）元素1、元素2...為基礎選擇器（標簽選擇器、類選擇器、id選擇器等），
使用實體：
.left-box, .right-box{ color: red; }
實體作用：將所有類名為"left-box"和"right-box"的元素中的字體顏色（color）設定為紅色（red）
2.4 偽類選擇器
偽類選擇器用于向某些選擇器添加特殊的效果，這里介紹鏈接偽類選擇器和 focus偽類選擇器，
使用格式：在選擇器后用冒號表示，如 :hover、:active等，
- 鏈接偽類選擇器
鏈接偽類選擇器通過將元素選擇器（a 元素）和偽類選擇器復合，起到不同的效果，具體可以分為以下四種，
| 鏈接偽類選擇器 | 選擇元素 |
| a:link | 選擇到所有未被訪問的 a 元素 |
| a:visited | 選擇到所有已被訪問的 a 元素 |
| a:hover | 選擇到滑鼠指標位于其上的 a 元素 |
| a:active | 選擇活動鏈接（滑鼠按下未彈起的 a 元素） |
注意：為了確保鏈接偽類選擇器生效，需按照link、visited、hover、active的順序來寫，
使用實體：
a:hover{ color: red; }
實體作用：當滑鼠移到 a 元素上時，鏈接的文字顏色（color）變為紅色（red）
- focus偽類選擇器（:focus）
focus偽類選擇器可以選取獲得焦點（游標）的表單元素，
使用格式：
input:focus{ 樣式 }
使用實體：
input:focus{ background-color: skyblue; }
實體作用：當游標聚焦在 input 元素上時，input 元素的背景顏色（background-color）變為天藍色（skyblue）
?轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/548649.html
標籤：其他