在 CSS 中,方括號[]
是一種用來選擇元素的選擇器,被稱為屬性選擇器(Attribute Selector)。它可以根據元素的屬性值來選擇元素。
屬性選擇器有兩種形式:
[attr] { /*選擇擁有 attr 屬性的所有元素*/ } [attr=value] { /*選擇擁有 attr 屬性且屬性值為 value 的元素*/ }
第一種形式的屬性選擇器,選擇了擁有指定屬性的所有元素,屬性值不影響選擇結果。比如,[class]
就可以選擇所有擁有 class 屬性的元素。
第二種形式的屬性選擇器則需指定屬性值,只有符合條件的元素才會被選擇。比如,[]
就可以選擇其中 href 屬性值為 http://www.example.com 的鏈接元素。
此外,屬性選擇器還可以使用~
(tilde) 和(pipe) 來指定包含屬性值或以屬性值為開頭的元素:
[attr~=value] {/*選擇帶有 attr 屬性,在屬性值中包含 value 的元素*/} [attr|=value] {/*選擇屬性值為 value 或以 value- 開頭的元素*/}
對于以上示例,[class~="selected"]
可以選擇所有 class 屬性值中包含 "selected" 的元素,而[lang|="en"]
則可以選擇 lang 屬性值為 "en" 或以 "en-" 開頭的元素。
使用屬性選擇器能夠簡潔明了地選擇元素,但也需要注意少用、用得當,以免降低 CSS 的可維護性。