E[attr]
E[attr=val]
E[attr|=val]
E[attr~=val]
E[attr*=val]
E[attr^=val]
E[attr$=val]
- E[attr]
<style>
p[name] {background-color: red}
</style>
<body>
<p>1</p>
<p name="p2">2</p>
</body>
匹配含有 name 属性的 p 元素。
- E[attr=val]
<style>
p[name=p2] {background-color: red}
</style>
<body>
<p name="p1">1</p>
<p name="p2">2</p>
</body>
匹配含有 name 属性且值为 p2 的 p 元素。
- [attr|=val]
<style>
p[name|=p2] {background-color: red}
</style>
<body>
<p name="p1">1</p>
<p name="p2">2</p>
<p name="p22">3</p>
<p name="p2-2">4</p>
</body>
匹配含有 name 属性且值为 p2 或以 p2-开头的 p 元素。该选择器最初是为属性 lang="en-us" 而设计的，方便选择语言。
- [attr~=val]
<style>
p[name~=p2] {background-color: red}
</style>
<body>
<p name="p1 p2">1</p>
<p name="p2">2</p>
<p name="p3">3</p>
</body>
匹配含有 name 属性且属性值以空格隔开，包含 p2 单词的 p 元素。
- [attr*=val]
<style>
p[name*=p2] {background-color: red}
</style>
<body>
<p name="p1">1</p>
<p name="p2">2</p>
<p name="2p2">3</p>
<p name="p22">4</p>
</body>
匹配含有 name 属性且属性值在任何位置包含了 p2 的 p 元素。
- E[attr^=val]
<style>
p[name^=p2] {background-color: red}
</style>
<body>
<p name="p1">1</p>
<p name="p2">2</p>
<p name="2p2">3</p>
<p name="p22">4</p>
</body>
匹配含有 name 属性且属性值以 p2 开头的 p 元素。
- E[attr$=val]
<style>
p[name$=p2] {background-color: red}
</style>
<body>
<p name="p1">1</p>
<p name="p2">2</p>
<p name="2p2">3</p>
<p name="p22">4</p>
</body>
匹配含有 name 属性且属性值以 p2 结尾的 p 元素。
网友评论