css3 選擇器：屬性選擇器（五）

weixin_34236497發表於2017-06-19
CSSS3
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 元素。

1333111-50b4e489f53199cd.png

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

1333111-50b4e489f53199cd.png

  • [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" 而設計的，方便選擇語言。

1333111-5e8a91269b2bc6ac.png

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

1333111-4bc1463949b34f1d.png

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

1333111-f484002f66b4328d.png

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

1333111-81098726036aa7d5.png

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

1333111-3ff10977ce72aea0.png

相關文章