天天看點
傳回

【36】CSS3（1）—— 新增選擇器③結構僞類選擇器

★文章内容學習來源：拉勾教育大前端就業集訓營

三、結構僞類選擇器

接着上兩篇：

【34】CSS3（1）—— 新增選擇器①子級選擇器

【35】CSS3（1）—— 新增選擇器②兄弟選擇器

本篇講解css3新增的第三種選擇器：結構僞類選擇器

【36】CSS3（1）—— 新增選擇器③結構僞類選擇器

1.介紹

選擇器 簡介

E:first-child

 		比對父元素中的第一個子元素

E:last-child

 		比對父元素中最後一個E元素

E:nth-child(n)

 		比對父元素中的第n個子元素E

E:first-of-type

 		指定類型E的第一個

E:last-of-type

 		指定類型E的最後一個

E:nth-of-type(n)

 		指定類型E的第n個

2. 補充：

2.1 補充：

nth-child（n）

  • n 可以是數字，關鍵字和公式；
  • n 如果是數字，就是選擇第 n 個 ；
  • 常見的關鍵詞 even 偶數 odd 奇數 ；
  • 常見的公式如下 ( 如果 n 是公式，則從 0 開始計算，n是從 0 ，1，2，3… 一直遞增） ；
  • 但是第 0 元素或者超出了元素的個數會被忽略 ；
公式 取值
2n 偶數
2n+1 奇數
5n 5 10 15 ……
n+5 從第5個開始（包含第5個）到最後，5 6 7 8 9 ……
-n+5 前5個（包含第5個），5 4 3 2 1 0……
2.1 舉例參見3.3.2其它寫法

2.2 補充：

E:nth-child(n)

 和

E:nth-of-type(n)

 的差別

  • E:nth-child(n)

     比對父元素的第 n 個子元素 E，同時需要滿足兩個條件：①父元素的第n個子元素②且第n個子元素必須是E

  • E:nth-of-type(n)

     比對同類型中的第 n 個同級兄弟元素 E，會忽視其他同級的非同類型元素。隻把同級所有E元素進行排序，選中第n個E。
2.2 舉例 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>.2對比舉例</title>
  <style>
    p:nth-of-type(3) {   /*選中指定類型p标簽，隻将同級p标簽進行排序，選中同級元素的第3個p标簽*/
      background-color: pink;
    }
    p:nth-child(2) {  /*同父元素的第2個子元素,且必須同時是p标簽，才可以選中；可以選中,因為第2個子元素是p标簽*/
      background-color: skyblue;   
    }
    p:nth-child(1) {  /*同父元素的第1個子元素,且必須同時是p标簽，才可以選中；沒有辦法選中,因為第1個子元素是h2标簽*/
      background-color: red;
    }
    h2:nth-child(1) {  /*同父元素的第1個子元素,且必須同時是h2标簽，才可以選中；可以選中,因為第1個子元素是h2标簽*/
      background-color: gold;
    }
  </style>
</head>
<body>
  <div class="box1">
    <h2>box1中第一個二級标題</h2>
    <p>box1中段落1</p>
    <h2>box1中第二個二級标題</h2>
    <p>box1中段落2</p>
    <p>box1中段落3</p>
    <p>box1中段落4</p>
    <p>box1中段落5</p>
  </div>
  <div class="box2">
    <h2>box2中第一個二級标題</h2>
    <p>box2段落1</p>
    <h2>box2第二個二級标題</h2>
    <p>box2段落2</p>
    <p>box2段落3</p>
    <p>box2段落4</p>
    <p>box2段落5</p>
  </div>
</body>
</html>
【36】CSS3（1）—— 新增選擇器③結構僞類選擇器

3.所有結構僞類選擇器舉例

3.1 E:first-child （比對父元素中的第一個子元素 ） 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>結構僞類選擇器3.1</title>
  <style>
    .box1 :first-child {    /*選中.box1種的第一個标簽(h2标簽）*/
      background-color: pink;
    }
  </style>
</head>
<body>
  <div class="box1">
    <h2>第一個二級标題</h2>
    <p>段落1</p>
    <h2>第二個二級标題</h2>
    <p>段落2</p>
    <p>段落3</p>
    <p>段落4</p>
    <p>段落5</p>
  </div>
</body>
</html>
【36】CSS3（1）—— 新增選擇器③結構僞類選擇器
3.2 E:last-child（比對父元素中最後一個E元素 ） 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>結構僞類選擇器3.2</title>
  <style>
      .box1 :last-child { /*選中.box1種的最後一個标簽（p标簽（段落5））*/
      background-color: skyblue;
    }  
  </style>
</head>
<body>
  <div class="box1">
    <h2>第一個二級标題</h2>
    <p>段落1</p>
    <h2>第二個二級标題</h2>
    <p>段落2</p>
    <p>段落3</p>
    <p>段落4</p>
    <p>段落5</p>
  </div>
</body>
【36】CSS3（1）—— 新增選擇器③結構僞類選擇器
3.3 E:nth-child(n) （比對父元素中的第n個子元素E ）
3.3.1正常常見寫法： 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>結構僞類選擇器3.3.1</title>
  <style>
     .box1 :nth-child(4) {  /*選中.box1中的第4個标簽（p标簽（段落2））*/
      background-color:pink;
    } 
    .box1 p:nth-child(3) { /*選中.box1中的第3個為p标簽的标簽；但是第3個是h2标簽（第二個二級标題），是以選不上*/
      background-color: blue;
    }   
    .box1 p:nth-child(6) { /*選中.box1中的第6個為p标簽的标簽；第6個是p标簽(段落4)，可以選中*/
      background-color: yellowgreen; 
    }  
  </style>
</head>
<body>
  <div class="box1">
    <h2>第一個二級标題</h2>
    <p>段落1</p>
    <h2>第二個二級标題</h2>
    <p>段落2</p>
    <p>段落3</p>
    <p>段落4</p>    <p>段落5</p>
  </div>
</body>
</html>
【36】CSS3（1）—— 新增選擇器③結構僞類選擇器
3.3.2其它寫法： 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>結構僞類選擇器3.3.2</title>
  <style>
    .box1 p:nth-child(odd) {   /*選中.box1的奇數次，且同時為p标簽的子元素，有兩個p标簽（段落3/段落5）*/
      background-color: yellow;
    } 
     .box1 p:nth-child(-n+4) {   /*選中.box1的前4個，且同時為p标簽的子元素，有兩個p标簽（段落1/段落2）*/
      background-color: darkgray;
    } 
  </style>
</head>
<body>
  <div class="box1">
    <h2>第一個二級标題</h2>
    <p>段落1</p>
    <h2>第二個二級标題</h2>
    <p>段落2</p>
    <p>段落3</p>
    <p>段落4</p>
    <p>段落5</p>
  </div>
</body>
</html>
【36】CSS3（1）—— 新增選擇器③結構僞類選擇器
3.4 E:first-of-type （指定類型E的第一個） 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>結構僞類選擇器3.4</title>
  <style>
     .box1  p:first-of-type {   /*選中.box1中第一個出現的p标簽*/
      background-color: pink;
    }
  </style>
</head>
<body>
  <div class="box1">
    <h2>第一個二級标題</h2>
    <p>段落1</p>
    <h2>第二個二級标題</h2>
    <p>段落2</p>
    <p>段落3</p>
    <p>段落4</p>
    <p>段落5</p>
  </div>
</body>
</html>
【36】CSS3（1）—— 新增選擇器③結構僞類選擇器
3.5 E:last-of-type （指定類型E的最後一個） 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>結構僞類選擇器3.5</title>
  <style>
     .box1  h2:last-of-type {   /*選中.box1中最後一個出現的h2标簽*/
      background-color:hotpink;
    }
  </style>
</head>
<body>
  <div class="box1">
    <h2>第一個二級标題</h2>
    <p>段落1</p>
    <h2>第二個二級标題</h2>
    <p>段落2</p>
    <p>段落3</p>
    <p>段落4</p>
    <p>段落5</p>
  </div>
</body>
</html>
【36】CSS3（1）—— 新增選擇器③結構僞類選擇器
3.6 E:nth-of-type(n) （指定類型E的第n個） 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>結構僞類選擇器3.6</title>
  <style>
     .box1 p:nth-of-type(5) {   /*選中.box1中指定類型p标簽中的第5個*/
      background-color: gold;
    }
    p:nth-of-type(3) {   /*選中指定類型p标簽，同級元素的第2個p标簽*/
      background-color: pink;
    }
  </style>
</head>
<body>
  <div class="box1">
    <h2>box1中第一個二級标題</h2>
    <p>box1中段落1</p>
    <h2>box1中第二個二級标題</h2>
    <p>box1中段落2</p>
    <p>box1中段落3</p>
    <p>box1中段落4</p>
    <p>box1中段落5</p>
  </div>
  <div class="box2">
    <h2>box2中第一個二級标題</h2>
    <p>box2段落1</p>
    <h2>box2第二個二級标題</h2>
    <p>box2段落2</p>
    <p>box2段落3</p>
    <p>box2段落4</p>
    <p>box2段落5</p>
  </div>
</body>
</html>
【36】CSS3（1）—— 新增選擇器③結構僞類選擇器

下篇繼續：【37】CSS3（1）—— 新增選擇器④僞元素選擇器

前端學習中 css3 原力計劃
上一篇: CSS結構性僞類選擇器
下一篇: CSS3新增屬性選擇器

繼續閱讀