CSS – 元素选择器 – 属性选择器

简介

CSS属性选择器能通过多种属性方法精准选择DOM元素.

属性选择器

属性是相对于标签而言，就是根据指定名称的属性的值来查找元素。

E[attr]:查找指定的拥有attr属性的E标签。如查找拥有 style 属性的 div 标签

<div style="xx"></div>

<style>
   div[style]{...}
</style>

E[attr=value]:查找拥有指定的 Attr 属性并且属性值为 value 的E标签，如想查找拥有 class 属性并且值为 red 的 li 标签，=是严格匹配的

<div style="red"></div>

<style>
   div[style=red]{...}
</style>

E[attr*=value] : 查找拥有指定的 attr 属性并且属性值中包含（可以在任意位置） value 的E标签

<div style="red"></div>
<div style="red-xxx"></div>

<style>
   div[style*=red]{...}
</style>

E[attr^=value] :查找拥有指定的 attr 属性并且属性值以 value 开头的E标签

<div style="red-xxx"></div>  此元素匹配
<div style="xxx-red"></div>  此元素不匹配

<style>
   div[style^=red]{...}
</style>

E[attr$=value] :查找拥有指定的 attr 属性并且属性值以 value 结束的E标签

<div style="red-xxx"></div>  此元素不匹配
<div style="xxx-red"></div>  此元素匹配

<style>
   div[style$=red]{...}
</style>