選擇器由 HTML 元素的 id、class 屬性或元素名本身以及一些特殊符號構成,用來指定要為哪個 HTML 元素定義樣式。選擇器是 CSS 樣式規則中重要的組成部分,我們可以將選擇器看作是 CSS 樣式與 HTML 元素之間的匹配模式,與選擇器關聯的樣式規則會應用于選擇器所指定的 HTML 元素上。CSS 中提供了多種不同類型的選擇器,您可以根據自己的喜好來選擇使用。
本節我們來介紹一下 CSS 中幾種常用選擇器的定義方式:
通用選擇器用星號*表示,它不匹配某個特定的 HTML 元素,而是匹配 HTML 文檔中的每個元素。在開發中,我們通常使用通用選擇器來清除 HTML 元素中默認的內外邊距,如下所示:
注意:雖然通用選擇器內的樣式規則能夠應用于 HTML 文檔中的每個元素,但并不建議在生產環境中過于頻繁地使用通用選擇器。正是因為通用選擇器會匹配網頁上每個元素的特點,頻繁的使用會給瀏覽器帶來太多不必要的壓力。
一個完整的 HTML 文檔由各式各樣的標簽組成,而標簽選擇器可以通過具體的標簽名稱來匹配文檔內所有同名的標簽,如下所示:
p選擇器能夠匹配文檔中所有的<p>標簽。
ID 選擇器用來匹配 HTML 文檔中具有指定 ID 屬性的標簽,ID 選擇器的定義需要用到井號#,后面緊跟 ID 屬性的值,如下所示:
#nav選擇器能夠匹配文檔中具有id="nav"屬性的標簽。
類選擇器可以根據標簽的 class 屬性匹配具體的 HTML 標簽,所有符合條件的標簽都會根據選擇器內的樣式進行格式化。類選擇器的定義需要用到一個英文的句號.,后面緊跟 class 屬性的值,如下所示:
.black選擇器能夠匹配文檔中所有具有class="black"屬性的標簽。
由于 class 屬性不是唯一的,可以應用于不同的標簽,因此您還可以在定義類選擇器時指定具體的標簽,如下所示:
p.black選擇器僅會將其中的樣式應用到所有具有class="black"屬性的<p>標簽中,對于其它的具有class="black"屬性的標簽則沒有影響。
另外,一個 HTML 標簽中 class 屬性可能不止一個,例如:
假如我們要為所有 class 屬性包含 info 的元素設置粗體,為所有 class 屬性包含 selected 的元素設置紅色字體,為 class 屬性中既包含 info 又包含 selected 的元素設置藍色背景,則可以寫成下面這樣:
這種由多個 class 屬性值所組成的類選擇器我們可以稱之為“多類選擇器”,而前面介紹的由單個 class 屬性值定義的類選擇器可以稱為“單類選擇器”。
注意:多類選擇器中,多個 class 屬性之間是緊挨著的(例如 .info.selected),不需要使用空格分開。
當一個<p>標簽嵌套在一個<div>標簽內部的時候,就可以將這個<p>標簽看作是<div>標簽的后代。當我們需要選擇一個標簽的后代標簽時,就可以使用后代選擇器。后代選擇器的定義方式就是將標簽名、class 屬性或 id 屬性等按照標簽的嵌套關系由外到內的依次羅列,中間使用空格分開,如下所示:
ul li a選擇器僅會匹配無序列表<ul>標簽的所有后代<a>標簽。