Selector

Posted on 2014-08-13 Edited on 2023-11-24 In CSS Views: Disqus:

一、*

Universal selector

<!DOCTYPE html>
<html>

<head>
  <style>
    div {
      border: solid 1px #ddd;
      margin: 1.5em;
    }

    #first>* {
      border: solid 1px red;
    }
  </style>
</head>

<body>
  <div id="first">
    <div>
      <div>
        <p>test</p>
      </div>
    </div>
  </div>
</body>

</html>

執行畫面

說明：

1、「*」符號代表任何一種元素。

2、*[class] 等於 [class]。

3、*.test 等於 .test。

4、*#first 等於 #first。

二、E

Type selector

<!DOCTYPE html>
<html>

<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>

<body>
  <p>test</p>
</body>

</html>

執行畫面

說明：

E 表示為元素。

三、E.warning

Class selectors

<!DOCTYPE html>
<html>

<head>
  <style>
    p.warning {
      background-color: yellow;
    }

    p[class~="warning"] {
      background-color: yellow;
    }

    .warning {
      background-color: yellow;
    }

    [class~="warning"] {
      background-color: yellow;
    }

    *.warning {
      background-color: yellow;
    }
  </style>
</head>

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

</html>

執行畫面

說明：

1、E.warning 等於 E[class~="warning"]。

2、.warning 等於 *.warning 等於 [class~="warning"]。

3、p.warning.marine 表示要符合元素為 p，並且 class 屬性值含有 warning 字串值，

並且 class 屬性值再有 marine 字串值，才符合。如下範例

<!DOCTYPE html>
<html>

<head>
  <style>
    p.warning.marine {
      background-color: yellow;
    }
  </style>
</head>

<body>
  <p class="warning">p1</p>
  <p class="marine">p2</p>
  <p class="warning marine">p3</p>
  <p class="warning aqua marine">p4</p>
</body>

</html>

執行畫面

四、E#myid

ID selectors

<!DOCTYPE html>
<html>

<head>
  <style>
    #chap {
      background-color: yellow;
    }

    p#chap {
      background-color: yellow;
    }

    *#chap {
      background-color: yellow;
    }
  </style>
</head>

<body>
  <p id="chap">p1</p>
  <p id="marine">p2</p>
  <h1 id="chap">h3</h1>
</body>

</html>

執行畫面

說明：

1、#chap 等於 *#chap。

2、p#chap 表示一元素為 p，並且 id 值為 chap 才符合。

五、E:not(s)

Negation pseudo-class

1、:not() 裡面可以是 id selector

<!DOCTYPE html>
<html>

<head>
  <style>
    p:not(#chap) {
      background-color: yellow;
    }
  </style>
</head>

<body>
  <p id="chap">p1</p>
  <p id="marine">p2</p>
</body>

</html>

執行畫面

2、:not() 裡面可以是 Attribute selector

<!DOCTYPE html>
<html>

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

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

</html>

執行畫面

3、:not() 裡面可以是 Type Selector

<!DOCTYPE html>
<html>

<head>
  <style>
    div *:not(p) {
      background-color: yellow;
    }
  </style>
</head>

<body>
  <div>
    <p id="chap">p1</p>
    <p id="marine">p2</p>
    <h1>h3</h1>
  </div>
</body>

</html>

執行畫面

4、:not() 可以串聯 :not()，表示要同時滿足所有串聯 :not() 的條件才符合。

<!DOCTYPE html>
<html>

<head>
  <style>
    div *:not(p):not(h1) {
      background-color: yellow;
    }
  </style>
</head>

<body>
  <div>
    <p id="chap">p1</p>
    <p id="marine">p2</p>
    <h1>h3</h1>
    <h6>h4</h6>
  </div>
</body>

</html>

執行畫面

5、其他範例(故意弄個有問題的範例來對照)

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <style>
    div:not(h1):not(h2) {
      user-select: none;
    }
  </style>
</head>

<body>
  <div>
    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
  </div>
  <br />
  <section>
    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
  </section>
</body>

</html>

六、E F

Descendant combinator

<!DOCTYPE html>
<html>

<head>
  <style>
    div span {
      background: yellow;
    }
  </style>
</head>

<body>
  <div>
    <p>
      <span>test</span>
    </p>
  </div>
</body>

</html>

執行畫面

說明：

E F 表示只要是 E 元素包著 F 元素，不管中間隔多少層，都符合。

七、E > F

Child combinator

<!DOCTYPE html>
<html>

<head>
  <style>
    div>p {
      background: yellow;
    }
  </style>
</head>

<body>
  <div>
    <p>
      <span>test</span>
    </p>
  </div>
</body>

</html>

執行畫面

說明：

E > F 表示 E 元素(父元素)包著 F 元素(子元素)，中間不能有隔層，才符合。

八、E + F

Next-sibling combinator

<!DOCTYPE html>
<html>

<head>
  <style>
    h3+h6 {
      background: yellow;
    }
  </style>
</head>

<body>
  <h1>h1</h1>
  <h3 foo="bar">h3</h3>
  <h6>h6</h6>
</body>

</html>

執行畫面

說明：

1、E 跟 F 皆限定為元素。

2、E + F 表示為 F 元素一定要緊接在 E 元素之後才符合。

3、E 或 F 元素可以個別加一點限制條件，如下範例

<!DOCTYPE html>
<html>

<head>
  <style>
    h3[foo="bar"]+h6 {
      background: yellow;
    }
  </style>
</head>

<body>
  <h1>h1</h1>
  <h3 foo="bar">h3</h3>
  <h6>h6</h6>
</body>

</html>

九、E ~ F

Subsequent-sibling combinator

<!DOCTYPE html>
<html>

<head>
  <style>
    h1~h6 {
      background: yellow;
    }
  </style>
</head>

<body>
  <h1>h1</h1>
  <h3 foo="bar">h3</h3>
  <h6>h6</h6>
</body>

</html>

執行畫面

說明：

1、其特性跟 Next-sibling combinator 差不多，唯一不同的是，

F 元素不一定要緊接在 E 元素之後才符合。