css常見選擇器：+、~、>、:first-child，:nth-child()的用法

時間 2019-12-05

標籤 css 常見選擇器 child nth 用法欄目 CSS 简体版

原文原文鏈接

本篇文章主要記錄一些css常見的選擇器的區別和用法，如相鄰兄弟選擇器（+）、兄弟選擇器(>)、子選擇器(+)、:nth-child()等，掌握了這些，能夠幫助咱們在前端開發中事半功倍。css

相鄰兄弟選擇器(+)

定義：相鄰兄弟選擇器（Adjacent sibling selector）可選擇緊接在另外一元素後的元素，且兩者有相同父元素。html

html代碼：前端

<p>這裏是第一個p標籤</p>
    <p>這裏是第二個p標籤</p>
    <h2>標題H2</h2>
    <p>這裏是第三個p標籤</p>
    <p>這裏是第四個p標籤</p>
    <p>這裏是第五個p標籤</p>
複製代碼

css樣式：瀏覽器

h2+p {color: red; }
複製代碼

結果： spa

<ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
複製代碼

li + li {color:red;}
複製代碼

結果：3d

分析：一開始特別納悶爲啥「List item 2」和「List item 3」都被選中了~~~code

首先分析選擇器樣式：li+li{}，字面意思是選取全部位於li標籤後的第一個li元素cdn

很顯然第一個li不會被選中，由於它前面不是li
第二個li會被選中，由於它是第一個li標籤緊鄰的li標籤
第三個li也會被選中，由於第三個li標籤的上一個標籤也是li標籤，也知足li+li{}的條件：li標籤後的第一個li標籤

正由於css選擇器的樣式爲li+li{}，因此代碼中的li標籤就能夠一直套用這個「公式」。htm

注：前端面包屑導航中常常用到該選擇器。blog

兄弟選擇器（~），又稱匹配選擇器

定義：做用是查找某一個指定元素的後面的全部兄弟結點

結果：

經過這兩個例子，能夠發現雖然這兩個選擇器都表示兄弟選擇器，可是‘+’選擇器則表示某元素後相鄰的兄弟元素，也就是緊挨着的，是單個的（特殊狀況：循環多個）。而‘~’選擇器則表示某元素後全部同級的指定元素，強調全部的。

子選擇器(>)

定義：只能選擇做爲某元素兒子元素的元素（直接子元素），不包括孫元素、曾孫元素等等等。

:first-child

定義：用於選取屬於其父元素的首個子元素的指定選擇器

嗯，乍一看好像說的不是很明白，所以這個選擇器很容易讓人誤解，一般會有兩種誤解：

誤解一：認爲E:first-child選中E元素的第一個子元素。
誤解二：認爲E:first-child選中E元素的父元素的第一個E元素。

正確的理解應該是：只要E元素是它的父級的第一個子元素，就選中。它須要同時知足兩個條件，一個是「第一個子元素」，另外一個是「這個子元素恰好是E」。

<style> span:first-child{color: red;} p:first-child{color: blue;} /*p元素的父元素的第一個子元素是div而不是p元素，所以該樣式不起做用*/ i:first-child{color: orange;} </style>

<div class="demo">
<div>.demo的第一個子元素是div</div>
<!--第一個span元素是它的父級P元素的第一個span，顏色變紅色-->
<p><span>第一個span</span>第一個段落P<span>第二個span</span></p>
<!--第一個i元素是它的父級a元素的第一個i，顏色變橙色-->
<p>一個連接<i>第一個i元素</i></p>
<!--第二個i元素是它的父級a元素的第一個i，顏色變橙色-->
<p>一個連接<i>第二個i元素</i></p>
<p>一個連接</p>
</div>
複製代碼

效果：

:nth-child(n)

定義：該選擇器選取父元素的第 N 個子元素，與類型無關。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
<style> p:nth-child(2) { background:#ff0000; } </style>
</head>
<body>

<h1>這是一個標題</h1>
<p>這是第一個段落。</p>
<p>這是第二個段落。</p>
<p>這是第三個段落。</p>
<p>這是第四個段落。</p>

<p><b>注意:</b> Internet Explorer 8 以及更早版本的瀏覽器不支持 :nth-child()選擇器.</p>

</body>
</html>
複製代碼

效果：

:nth-child(n)的詳細用法：

nth-child(3) 表示選擇列表中的第三個元素。

nth-child(2n)表示列表中的偶數標籤，即選擇第二、第四、第6……標籤

nth-child(2n-1) 表示選擇列表中的奇數標籤，即選擇第一、第三、第五、第7……標籤

nth-child(n+3) 表示選擇列表中的標籤從第3個開始到最後（>=3）

nth-child(-n+3) 表示選擇列表中的標籤從0到3，即小於3的標籤(<=3)

nth-last-child(3) 表示選擇列表中的倒數第3個標籤

:nth-of-type(n)

定義:選擇器匹配屬於父元素的特定類型的第 N 個子元素的每一個元素，與元素類型有關

<!DOCTYPE html>
<html>
<head>
<style> p:nth-of-type(2) { background:#ff0000; } </style>
</head>
<body>

<h1>這是標題</h1>
<p>第一個段落。</p>
<p>第二個段落。</p>
<p>第三個段落。</p>
<p>第四個段落。</p>
<p>第五個段落。</p>

</body>
</html>
複製代碼

效果：

屬性選擇器

定義：能夠爲擁有指定屬性的 HTML 元素設置樣式，而不只限於 class 和 id 屬性。

<html>
<head>
<style type="text/css"> [title~=hello] { color:red; } </style>
</head>

<body>
<h1>能夠應用樣式：</h1>
<h2 title="hello world">Hello world</h2>
<p title="student hello">Hello W3School students!</h1>

</body>
</html>
複製代碼