Selector - Structural pseudo-classes

Posted on Edited on In Views: Disqus:

 

一、E:root

無論元素 E 是什麼，:root 總是表示 html tag。

 

二、E:nth-child(n)

先選出同一階層的第 n 個元素，並且該元素要等於 E ( n 從 1 算起)。

<!DOCTYPE html>
<html>

<head>
  <style>
    p:nth-child(3) {
      background: yellow;
    }
  </style>
</head>

<body>
  <div class="first">
    <p>p1</p>
    <h1>h2</h1>
    <p>p3</p>
    <p>p4</p>
  </div>
  <div class="second">
    <p>p1</p>
    <h1>h2</h1>
    <p>p3</p>
    <p>p4</p>
  </div>
</body>

</html>

執行畫面

說明：

1、E:nth-child(2n+1) 等於 E:nth-child(odd)。

2、E:nth-child(2n+0) 等於 E:nth-child(even)。

 

三、E:nth-last-child(n)

特性同上，只差在於，

從後面數來，先選出同一階層的第 n 個元素，並且該元素要等於 E ( n 從 1 算起)。

 

四、E:nth-of-type(n)

同一階層的元素 E 中，選出第 n 個元素 E ( n 從 1 算起)。

<!DOCTYPE html>
<html>

<head>
  <style>
    p:nth-of-type(2) {
      background: red;
    }
  </style>
</head>

<body>
  <div class="first">
    <p>p1</p>
    <h1>h1</h1>
    <p>p2</p>
    <p>p3</p>
  </div>
  <div class="second">
    <p>p1</p>
    <h1>h1</h1>
    <p>p2</p>
    <p>p3</p>
  </div>
</body>

</html>

執行畫面

 

五、E:nth-last-of-type(n)

特性同上，只差在於，

從後面數來，同一階層的元素 E 中，選出第 n 個元素 E ( n 從 1 算起)。

 

六、E:first-child

選出同一階層的第一個元素，並且該元素要等於 E。

其實 E:first-child 就是等於 E:nth-child(1)。

E :first-child 等於 E:first-child 等於 E *:first-child。

 

七、E:last-child

從後面數來，選出同一階層的第一個元素，並且該元素要等於 E。

其實 E:last-child 就是等於 E:nth-last-child(1)。

 

八、E:first-of-type

同一階層的元素 E 中，選出第一個元素 E。

其實 E:first-of-type 就是等於 E:nth-of-type(1)。

 

九、E:last-of-type

從後面數來，同一階層的元素 E 中，選出第一個元素 E。

其實 E:last-of-type 就是等於 E:nth-last-of-type(1)。

 

十、E:only-child

同一階層只存在一個元素，並且該元素要等於 E。

<!DOCTYPE html>
<html>

<head>
  <style>
    p:only-child {
      background: red;
    }
  </style>
</head>

<body>
  <div class="first">
    <p>p1</p>
  </div>
  <div class="second">
    <h1>h1</h1>
    <p>p1</p>
  </div>
  <div class="three">
    <p>p1</p>
    <p>p2</p>
  </div>
</body>

</html>

執行畫面

 

十一、E:only-of-type

同一階層的元素 E 中，只存在一個元素 E。

<!DOCTYPE html>
<html>

<head>
  <style>
    p:only-of-type {
      background: red;
    }
  </style>
</head>

<body>
  <div class="first">
    <p>p1</p>
  </div>
  <div class="second">
    <h1>h1</h1>
    <p>p1</p>
  </div>
  <div class="three">
    <p>p1</p>
    <p>p2</p>
  </div>
</body>

</html>

執行畫面

 

十二、E:empty

元素 E 底下沒有子元素。

 

參考資料：

Selector - :nth-child()與:nth-of-type()的差別