CSS3作為目前最新的CSS版本，在選擇器方面進行了多項更新，使得我們可以更加精確地定位需要樣式化的元素，下面就讓我們一起來了解一下CSS3新增的哪些選擇器。

1. 屬性選擇器

/* 屬性值匹配 */
[attr="value"] {
property: value;
}
/* 屬性值以某個值開頭 */
[attr^="value"] {
property: value;
}
/* 屬性值以某個值結尾 */
[attr$="value"] {
property: value;
}
/* 屬性值包含某個值 */
[attr*="value"] {
property: value;
}
/* 屬性值以某個值為前綴，后面有'-'符號 */
[attr|="value"] {
property: value;
}

2. 子串匹配選擇器

/* 匹配某個元素的class包含指定的字符串 */
[class~="value"] {
property: value;
}
/* 匹配某個元素的屬性以指定的字符串開始 */
[attr^="value"] {
property: value;
}
/* 匹配某個元素的屬性以指定的字符串結尾 */
[attr$="value"] {
property: value;
}
/* 匹配某個元素的屬性包含指定的字符串 */
[attr*="value"] {
property: value;
}

3. 偽類選擇器

/* 鼠標懸停時 */
element:hover {
property: value;
}
/* 焦點處于元素上時 */
element:focus {
property: value;
}
/* 元素處于選中狀態時 */
element:active {
property: value;
}
/* 元素為第一個子元素時 */
element:first-child {
property: value;
}
/* 元素為最后一個子元素時 */
element:last-child {
property: value;
}
/* 奇數行子元素 */
element:nth-child(odd) {
property: value;
}
/* 偶數行子元素 */
element:nth-child(even) {
property: value;
}
/* 指定位置的子元素 */
element:nth-child(n) {
property: value;
}
/* 只有一個子元素時 */
element:only-child {
property: value;
}

4. 偽元素選擇器

/* 元素前面插入一個內容 */
element:before {
content: "value";
property: value;
}
/* 元素后面插入一個內容 */
element:after {
content: "value";
property: value;
}

總結

CSS3在選擇器方面進行了多項更新，使得我們可以通過各種選擇器更加精確地定位需要樣式化的元素，這不僅提高了頁面的可維護性和擴展性，也為我們的工作帶來了更多的便利和靈活性。