CSS3選擇器有多種類型，它們可以根據(jù)不同的元素屬性、結(jié)構(gòu)關(guān)系或狀態(tài)來選擇元素。下面將介紹幾種常用的CSS3選擇器類型，并提供具體的代碼示例。
- 基本選擇器：
元素選擇器：使用元素名稱作為選擇器，此處以p元素為例：
p {
color: red;
}
登錄后復(fù)制
類選擇器：使用類名作為選擇器，以.開頭，此處以class為example的元素為例：
.example {
font-size: 16px;
}
登錄后復(fù)制
ID選擇器：使用ID作為選擇器，以#開頭，此處以id為title的元素為例：
#title {
font-weight: bold;
}
登錄后復(fù)制
- 屬性選擇器：
[attr]：選擇具有指定屬性的元素，此處以具有data屬性的元素為例：
[data] {
background-color: yellow;
}
登錄后復(fù)制
[attr=value]：選擇具有指定屬性和值的元素，此處以data屬性值為example的元素為例：
[data="example"] {
color: blue;
}
登錄后復(fù)制
[attr^=value]：選擇具有以指定值開頭的屬性值的元素，此處以data屬性值以”test”開頭的元素為例：
[data^="test"] {
text-decoration: underline;
}
登錄后復(fù)制
- 結(jié)構(gòu)性選擇器：
:nth-child(n)：選擇父元素的第n個子元素，此處以父元素的第3個子元素為例：
.parent :nth-child(3) {
background-color: green;
}
登錄后復(fù)制
:first-child：選擇父元素的第一個子元素，此處以父元素的第一個子元素為例：
.parent :first-child {
font-style: italic;
}
登錄后復(fù)制
- 偽類選擇器：
:hover：選擇鼠標(biāo)懸停在元素上的狀態(tài)，此處以元素懸停時改變背景顏色為例：
.example:hover {
background-color: orange;
}
登錄后復(fù)制
:active：選擇元素被激活時的狀態(tài)，此處以元素被點擊時改變文字顏色為例：
.example:active {
color: purple;
}
登錄后復(fù)制
以上是CSS3選擇器的部分類型和代碼示例，它們可以幫助開發(fā)者更靈活地選擇和控制頁面中的元素樣式。通過熟練掌握這些選擇器，可以有效提高頁面的開發(fā)效率和用戶體驗。
