這里說一下常用的CSS擴展選擇器。
選擇所有元素
- 選擇器選擇所有元素。
- 選擇器也可以選擇另一個元素內的所有元素。
使用格式：
* 選擇器名稱 {
屬性名1:屬性值1;
屬性名2:屬性值2;
...
}
舉例：
選擇所有元素，並設置其背景色。
Google瀏覽器中打開，查看效果：
並集選擇器
element,element 幾個元素具有相同的樣式，用逗號分隔每個元素的名稱。
使用格式：
element1,element2 {
屬性名1:屬性值1;
屬性名2:屬性值2;
...
}
舉例：
選擇所有<p>元素和l<h1>元素。
Google瀏覽器中打開，查看效果：
子選擇器
element element選擇器用於選擇元素內部的元素。
使用格式：
element1 element2 {
屬性名1:屬性值1;
屬性名2:屬性值2;
...
}
舉例：
選擇<div>元素內的所有<p>元素。
Google瀏覽器中打開，查看效果：
父選擇器
element>element 選擇器用於選擇特定父元素。
注意: 元素沒有被選中是不能直接指定父級的子元素。
使用格式：
element1>element2 {
屬性名1:屬性值1;
屬性名2:屬性值2;
...
}
舉例：
選擇所有父級是 <div> 元素的<p>元素。
Google瀏覽器中打開，查看效果：
屬性選擇器
[attribute=value] 選擇器用於選擇指定了屬性和值的元素。
使用格式：
元素名稱[屬性名="屬性值"] {
屬性名1:屬性值1;
屬性名2:屬性值2;
...
}
舉例：
選擇所有使用target="_blank"的a元素。
Google瀏覽器中打開，查看效果：
偽類選擇器
這里用 :link 選擇器為例
:link向未訪問的鏈接添加特殊的樣式。
注意: :link 選擇器對已經訪問的鏈接沒有樣式。
提示: 使用 :visited 選擇器設置訪問過的頁面鏈接的樣式，:hover選擇器當有鼠標懸停在其上的鏈接樣式，:active 選擇器設置當你點擊鏈接時的樣式。
使用格式：
元素:狀態 {
屬性名1:屬性值1;
屬性名2:屬性值2;
...
}
舉例：
選擇未訪問鏈接樣式。
Google瀏覽器中打開，查看效果：
