Selector - Attribute selectors

Posted on Edited on In Views: Disqus:

 

一、E[foo]

在元素 E 中，只要擁有 foo 屬性都符合條件。

<!DOCTYPE html>
<html>

<head>
  <style>
    p[foo] {
      background-color: yellow;
    }
  </style>
</head>

<body>
  <p>p1</p>
  <p foo>p2</p>
  <p>p3</p>
</body>

</html>

執行畫面

 

二、E[foo="bar"]

在元素 E 中，除了擁有 foo 屬性之外，並且 foo 屬性值要等於 bar 才符合條件。

<!DOCTYPE html>
<html>

<head>
  <style>
    p[foo="bar"] {
      background-color: yellow;
    }
  </style>
</head>

<body>
  <p>p1</p>
  <p foo="bar">p2</p>
  <p>p3</p>
</body>

</html>

執行畫面

 

三、E[foo~="bar"]

在元素 E 中，由空白區分出 bar 字串值時或單一 bar 字串時，則符合條件。

<!DOCTYPE html>
<html>

<head>
  <style>
    p[foo~="bar"] {
      background-color: yellow;
    }
  </style>
</head>

<body>
  <p foo="bar">p1</p>
  <p foo="sea bar">p2</p>
  <p foo="bar-say">p3</p>
</body>

</html>

執行畫面

 

四、E[foo^="bar"]

在元素 E 中，當 foo 屬性值的開頭為 bar 時，則符合條件。

<!DOCTYPE html>
<html>

<head>
  <style>
    p[foo^="bar"] {
      background-color: yellow;
    }
  </style>
</head>

<body>
  <p foo="bar">p1</p>
  <p foo=" bar">p2</p>
  <p foo="bar-say">p3</p>
</body>

</html>

執行畫面

 

五、E[foo$="bar"]

在元素 E 中，當 foo 屬性值的結尾為 bar 時，則符合條件。

<!DOCTYPE html>
<html>

<head>
  <style>
    p[foo$="bar"] {
      background-color: yellow;
    }
  </style>
</head>

<body>
  <p foo="bar">p1</p>
  <p foo="bar ">p2</p>
  <p foo="say-bar">p3</p>
</body>

</html>

執行畫面

 

六、E[foo*="bar"]

在元素 E 中，當 foo 屬性值的只要含有 bar 字串時，則符合條件。

<!DOCTYPE html>
<html>

<head>
  <style>
    p[foo*="bar"] {
      background-color: yellow;
    }
  </style>
</head>

<body>
  <p foo="zbarz">p1</p>
  <p foo="bar ">p2</p>
  <p foo="say-bar">p3</p>
</body>

</html>

執行畫面

 

七、E[foo|="en"]

在元素 E 中，當 foo 屬性值包含有 bar- 字串值或單一 bar 字串時，則符合條件。

<!DOCTYPE html>
<html>

<head>
  <style>
    p[foo|="bar"] {
      background-color: yellow;
    }
  </style>
</head>

<body>
  <p foo="bar">p1</p>
  <p foo="bar ">p2</p>
  <p foo="say-bar">p3</p>
  <p foo="bar-say">p4</p>
</body>

</html>

執行畫面