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>