CSS中的中括號(square brackets)可以用于匹配某些屬性的特定值。其語法為:
selector[attribute=value] { /* styles here */ }
其中,selector表示需要匹配的元素選擇器,attribute表示需要匹配的屬性名,value表示需要匹配的屬性值。
例如:
a[target="_blank"] { color: red; }
上述代碼匹配所有target屬性值為"_blank"的a標簽,并將其字體顏色設為紅色。
中括號還可以用于匹配屬性值中包含某個特定字符串的情況。語法為:
selector[attribute*="value"] { /* styles here */ }
其中,*表示匹配屬性值中包含value的所有元素。
例如:
img[src*="logo"] { opacity: 0.5; }
上述代碼匹配所有src屬性值中包含"logo"的img標簽,并將其不透明度設為0.5。
中括號還可以與其他選擇器組合使用,以實現更精確的匹配。例如:
input[type="text"][name*="age"] { background-color: #f2f2f2; }
上述代碼匹配所有type為"text"且name屬性值中包含"age"的input標簽,并將其背景色設為#f2f2f2。
除了*外,中括號還支持其他匹配符號,包括^(屬性值以value開頭)、$(屬性值以value結尾)和~(屬性值為以空格分隔的值列表中的一個),這里不再贅述。