css3 选择器：属性选择器（五）

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 元素。

css3 选择器：属性选择器（五）

推荐阅读更多精彩内容