CSS中[]属性选择器

element[attr]

选出拥有attr属性的所有element元素。

img[alt]{width:200px;}

element[attr = 'val']

选出某属性值等于val的所有element元素。

img[alt = 'title']{width:200px;}

element[attr ~= 'val']

选出某属性值等于val的所有element元素，并且val是唯一的元素。

<style>
div[class ~= "a"] {
  border: 2px solid #000;
}
</style>

<div class = "a">1</div>
<div class = "b">2</div>
<div class = "a b">3</div>

element[attr ^= 'val']

选出某属性值为val开头的所有element元素。

<style>
div[class ^= "a"] {
  border: 2px solid #000;
}
</style>

<div class = "abc">1</div>
<div class = "acb">2</div>
<div class = "bac">3</div>

element[attr $= 'val']

选出某属性值为val结尾的所有element元素。

<style>
div[class $= "c"] {
  border: 2px solid #000;
}
</style>

<div class = "abc">1</div>
<div class = "acb">2</div>
<div class = "bac">3</div>

element[attr *= 'val']

选出有attr属性并且属性值中包含val的element元素。

<style>
div[class *= "c"] {
  border: 2px solid #000;
}
</style>

<div class = "abc">1</div>
<div class = "acb">2</div>
<div class = "bac">3</div>

element[attr |= 'val']

选择具有attr属性且属性值为以val开头并用连接符"-"分隔的字符串的元素，如果属性值仅为val，也将被选择。

<style>
div[class |= "a"] {
  border: 2px solid #000;
}
</style>

<div class = "a-test">1</div>
<div class = "b-test">2</div>
<div class = "c-test">3</div>