CSS3選擇器是在CSS2的基礎上新增的一些選擇器,能夠更加方便、靈活地選擇和修改網頁中的元素,提高CSS的可讀性、可擴展性和可維護性。以下是一些常用的CSS3選擇器用法:
1. 屬性選擇器
屬性選擇器可以選擇擁有某個特定屬性或屬性值的元素,如[class], [title], [href=#home]等。例如:
a[href="#home"] {
color: red;
}
上述代碼表示選中href屬性值為#home的所有a標簽,并將它們的文字顏色設置為紅色。
2. 媒體查詢選擇器
媒體查詢選擇器可以根據設備的不同屏幕尺寸,選擇特定的CSS規則。例如:
@media (max-width: 768px) {
body {
font-size: 14px;
}
}
上述代碼表示在頁面最大寬度為768像素時,將body元素的字體大小設置為14像素。
3. 偽類選擇器
偽類選擇器可以選擇網頁中特定狀態的元素,如:hover、:focus、:checked等。例如:
a:hover {
color: blue;
}
上述代碼表示當鼠標懸停在a元素上時,將它的文字顏色設置為藍色。
4. 偽元素選擇器
偽元素選擇器可以為網頁中的某些元素添加特定的內容,如:before、:after等。例如:
h1:before {
content: "Heading: ";
}
上述代碼表示在每個h1元素前添加一個"Heading: "的文本內容。
5. 子元素選擇器
子元素選擇器可以選擇某個元素下特定的子元素,如ul > li、div > p等。例如:
ul > li {
color: green;
}
上述代碼表示只選擇ul中直接包含的li元素,并將它們的文字顏色設置為綠色。
總之,CSS3選擇器能夠提高CSS的選擇和樣式效果的靈活性,可以更加精確地選擇需要修改的元素,也能更加簡潔和直觀地管理CSS代碼。