CSS 選擇器是用于選擇 HTML 元素的方法。其中包括簡(jiǎn)單選擇器、組合選擇器和屬性選擇器。而高級(jí)選擇器則是在原有選擇器基礎(chǔ)上進(jìn)行擴(kuò)展，提供更加復(fù)雜的選擇器方法。

/* 可以使用 ID、class 和屬性選擇器 */
#myId {}
.myClass {}
[type="radio"] {}
/* 子元素選擇器 */
ul >li {}
/* 相鄰兄弟選擇器 */
h1 + p {}
/* 通用兄弟選擇器 */
h1 ~ p {}

下面介紹一下高級(jí)選擇器的具體用法。

:not() 偽類選擇器

該選擇器可以選擇除了指定元素以外的所有元素。

:not(p) {}
/* 選擇除了 class 為 myClass 的元素以外的所有 span 標(biāo)簽 */
span:not(.myClass) {}

[attr^=value] 和 [attr$=value] 屬性選擇器

選擇具有特定屬性值開(kāi)頭或結(jié)尾的元素。

/* 選擇所有 href 屬性以 http 開(kāi)頭的 a 標(biāo)簽 */
a[href^="http"] {}
/* 選擇所有 href 屬性以 .pdf 結(jié)尾的 a 標(biāo)簽 */
a[href$=".pdf"] {}

[attr|=value] 屬性選擇器

選擇具有指定屬性值或?qū)傩灾狄栽撝导舆B字符“-”開(kāi)頭的元素。

/* 選擇所有 lang 屬性值等于 zh-cn 或以 zh-cn- 開(kāi)頭的元素 */
[lang|=zh-cn] {}

:enabled 和 :disabled 表單選擇器

選擇可用和禁用的表單元素。

/* 選擇所有可用的表單元素 */
:enabled {}
/* 選擇所有禁用的表單元素 */
:disabled {}

:checked 表單選擇器

選擇被選中的表單元素。

/* 選擇所有被選中的單選框、復(fù)選框和 option 元素 */
input:checked {}

除了以上幾種高級(jí)選擇器，還有很多其他的高級(jí)選擇器，如 :nth-child(n)、:first-child、:last-child、:only-child 等等。這些高級(jí)選擇器可以幫助我們更加精準(zhǔn)地選擇元素。