1.3 属性选择器

• [attribute]
• [attribute=value]
• [attribute~=value]
• [attribute|=value]
• :lang(x)
• [attribute^=value]
• [attribute$=value]
• [attribute=value]*

[attribute]

• 指定属性

[class] {
    color: green;
}

<button class="test">测试 [attribute] </button>

[attribute=value]

• 指定属性与属性值

[class='a'] {
    color: red;
}

<button class="a">测试 [attribute=value] </button>

[attribute~=value]

• 指定属性包含属性值

[class~='b'] {
    color: orange;
}

<button class="b test">测试 [attribute~=value] </button>

[attribute|=value]

• 指定属性且属性值前缀

[class|='c'] {
    color: purple;
}

<button class="c">测试 [attribute|=value] true </button>
<button class="c-test test">测试 [attribute|=value] true </button>
<button class="ctest test">测试 [attribute|=value] false </button>
<button class="test c-test">测试 [attribute|=value] false </button>
<button class="c test">测试 [attribute|=value] false </button>

:lang(x)

• 指定属性 lang 且属性值前缀

p:lang(test) {
    color: red;
}

<p lang="test">test</p>
<p lang="testc">testc</p>
<p lang="test-c">test-c</p>
<p lang="test c">test c</p>

[attribute^=value]

• 属性前缀

[src^='https'] {
    border: 4px solid red;
}

<img src="http:xxx.jpg" width="100" height="100">
<img src="https:xxx.jpg" width="100" height="100">

[attribute$=value]

• 属性后缀

[src$='.png'] {
    border: 4px solid green;
}

<img src="http:xxx.jpg" width="100" height="100">
<img src="http:xxx.png" width="100" height="100">

[attribute=value]*

• 属性包含

[src*='img'] {
    border: 4px solid orange;
}

<img src="http:xxx.png" width="100" height="100">
<img src="http:xxximg.jpg" width="100" height="100">