CSS選擇器中括號(hào)可以在選擇器中指定更具體的屬性值,以便更準(zhǔn)確地選擇元素。
選擇器[屬性名=屬性值] { 屬性: 值; }
其中,選擇器表示要選擇的元素,方括號(hào)內(nèi)的屬性名和屬性值表示要選擇的屬性和屬性值,并且在屬性名和屬性值之間用等號(hào)連接。
例如,如果要選擇所有class屬性值中包含"active"的按鈕元素,可以使用以下選擇器:
.button[claas~="active"] { background-color: red; }
在此選擇器中,class屬性使用了帶有波浪線的屬性選擇器,其中波浪線表示只要class屬性中包含屬性值即可。因此,選擇器將選擇所有包含"class=XXX active XXX"的元素,并將它們的背景顏色設(shè)置為紅色。
除了波浪線之外,還有其他幾種運(yùn)算符可以在屬性選擇器中使用:
[屬性名|=屬性值] 選擇屬性值與指定值完全相等,或者以指定值后面有連字符"-"為前綴; [屬性名^=屬性值] 選擇屬性值以指定值為前綴; [屬性名$=屬性值] 選擇屬性值以指定值為后綴; [屬性名*=屬性值] 選擇屬性值包含指定值。
在實(shí)際使用中,可以把選擇器中括號(hào)的屬性選擇器結(jié)合其他選擇器一起使用,以便更準(zhǔn)確地選擇元素。例如,以下選擇器將選擇所有包含"active"的按鈕元素,并將它們的字體顏色設(shè)置為藍(lán)色:
button.active[type="submit"] { color: blue; }
在此選擇器中,button表示選擇所有按鈕元素;.active表示選擇class屬性中包含"active"的元素;[type="submit"]表示選擇type屬性為"submit"的元素。通過這三個(gè)選擇器的組合,可以在文檔中精確定位到要選擇的元素。