第 13 章 CSS 選擇器[上] · 李炎恢 HTML CSS JavaScript PHP Bootstrap 教程

# 第 13 章 CSS 選擇器[上] 學習要點： 1.選擇器總匯 2.基本選擇器 3.復合選擇器 4.偽元素選擇器主講教師：李炎恢本章主要探討 HTML5?中 CSS?選擇器，通過選擇器定位到想要設置樣式的元素。目前 CSS 選擇器的版本已經升級至第三代，即?CSS3 選擇器。CSS3 選擇器提供了更多、更豐富的選擇器方式，主要分為三大類。 **一．選擇器總匯** 本節課主要涉及到三種選擇器：基本選擇器、復合選擇器和偽元素選擇器，具體如下： | **選擇器** | **名稱** | **說明** | **CSS 版本** | | --- | --- | | * | 通用選擇器 | 選擇所有元素 | 2 | | <type> | 元素選擇器 | 選擇指定類型的元素 | 1 | | #<id> | id 選擇器 | 選擇指定 id?屬性的元素 | 1 | | .<class> | class 選擇器 | 選擇指定 class?屬性的元素 | 1 | | [attr]系列 | 屬性選擇器 | 選擇指定 attr?屬性的元素 | 2 ~ 3 | | s1,s2,s3... | 分組選擇器 | 選擇多個選擇器的元素 | 1 | | s1 s2 | 后代選擇器 | 選擇指定選擇器的后代元素 | 1 | | s1 > s2 | 子選擇器 | 選擇指定選擇器的子元素 | 2 | | s1 + s2 | 相鄰兄弟選擇器 | 選擇指定選擇器相鄰的元素 | 2 | | s1 ~ s2 | 普通兄弟選擇器 | 選擇指定選擇器后面的元素 | 3 | | ::first-line | 偽元素選擇器 | 選擇塊級元素文本的首行 | 1 | | ::first-letter | 偽元素選擇器 | 選擇塊級元素文本的首字母 | 1 | | ::before | 偽元素選擇器 | 選擇元素之前插入內容 | 2 | | ::after | 偽元素選擇器 | 選擇元素之后插入內容 | 2 | **二．基本選擇器** 使用簡單且頻率高的一些選擇器歸類為基本選擇器。 **1.****通用選擇器** ``` * { border: 1px solid red; } ``` 解釋：“*”號選擇器是通用選擇器，功能是匹配所有 html?元素的選擇器包括<html>和<body>標簽。可以使用如下元素標記測試效果： ``` 段落 加粗 無 ``` 通用選擇器會將所有元素匹配并配置樣式，這是把雙刃劍，好處就是非常方便，壞處就是將不必要的元素也配置了。目前為止，還不存在所有元素都必須配置的樣式，所以，一般來說，不常用。 **2.****元素選擇器** ``` p { color: red; } ``` ``` 段落 ``` 解釋：直接使用元素名稱作為選擇器名即可。 **3.ID** **選擇器** ``` #abc { font-size: 20px; } ``` ``` 段落 ``` 解釋：通過對元素設置全局屬性 id，然后使用#id?值來選擇頁面唯一元素。 **4.****類選擇器** ``` .abc { border: 1px solid red; } ``` ``` 加粗 無 ``` 解釋：通過對元素設置全局屬性 class，然后使用.class?值選擇頁面一個或多個元素。 ``` b.abc { border: 1px solid red; } ``` 解釋：也可以使用“元素.class?值”的形式，限定某種類型的元素。 ``` 無 ``` 解釋：類選擇器還可以調用多個樣式，中間用空格隔開進行層疊。 **5.****屬性選擇器** //所需?CSS2 版本? ``` [href] { color: orange; } ``` 解釋：屬性選擇器，直接通過兩個中括號里面包含屬性名即可。當然，還有更多擴展的屬性選擇器。 //所需?CSS2 版本? ``` [type="password"] { border: 1px solid red; } ``` 解釋：匹配屬性值的屬性選擇器。 //所需版本?CSS3 ``` [href^="http"] { color: orange; } ``` 解釋：屬性值開頭匹配的屬性選擇器。 //所需版本?CSS3 ``` [href$=".com"] { color: orange; } ``` 解釋：屬性值結尾匹配的屬性選擇器。 //所需版本?CSS3 ``` [href*="baidu"] { color: orange; } ``` 解釋：屬性值包含指定字符的屬性選擇器。 //所需版本?CSS2 ``` [class~="edf"] { font-size: 50px; } ``` 解釋：屬性值具有多個值時，匹配其中一個值的屬性選擇器。 //所需版本?CSS2 ``` [lang|="en"] { color: red; } ``` 解釋：屬性值具有多個值且使用“-”號連接符分割的其中一個值的屬性選擇器。比如 ``` HTML5 ``` **二．復合選擇器** 將不同的選擇器進行組合形成新的特定匹配，我們稱為復合選擇器。 **1.****分組選擇器** ``` p,b,i,span { color: red; } ``` 解釋：將多個選擇器通過逗號分割，同時設置一組樣式。當然，不但可以分組元素選擇器，還可以使用 ID?選擇器、類選擇器、屬性選擇器混合使用。 **2.****后代選擇器** ``` p b { color: red; } ``` 解釋：選擇元素內部所有元素。不在乎的層次深度。當然，后代選擇器也可以混合使用 ID?選擇器、類選擇器、屬性選擇器。 **3.****子選擇器** ``` ul > li { border: 1px solid red; } ``` ``` <ul> <li> 我是兒子 <ol> <li> 我是孫子 </li> <li> 我是孫子 </li> </ol> </li> <li> 我是兒子 </li> <li> 我是兒子 </li> </ul> ``` 解釋：子選擇器類似與后代選擇器，而最大的區別就是子選擇器只能選擇父元素向下一級的元素，不可以再往下選擇。 **4.****相鄰兄弟選擇器** ``` p + b { color: red; } ``` 解釋：相鄰兄弟選擇器匹配和第一個元素相鄰的第二個元素。 **5.****普通兄弟選擇器** ``` p ~ b { color: red; } ``` 解釋：普通兄弟選擇器匹配和第一個元素后面的所有元素。 **三．偽元素選擇器** 偽選擇器分為兩種第一種是下節偽類選擇器，還有一種就是偽元素選擇器。這兩種選擇器特性上比較容易混淆，在 CSS3?中為了區分，偽元素前置兩個冒號（::），偽類前置一個冒號（:）。 **1.::first-line** **塊級首行** ``` ::first-line { color: red; } ``` 解釋：塊級元素比如、<div>等的首行文本被選定。如果想限定某種元素，可以加上前置 p::first-line。 **2.::first-letter** **塊級首字母** ``` ::first-letter { color: red; } ``` 解釋：塊級元素的首行字母。 **3.::before** **文本前插入** ``` a::before { content: '點擊-'; } ``` 解釋：在文本前插入內容。 **4.::after** **文本后插入** ``` a::before { content: '-請進'; } ``` 解釋：在文本后插入內容。