相鄰兄弟選擇器（+）、子選擇器（>）、兄弟選擇器（~）等用法

時間 2019-12-04

標籤相鄰兄弟選擇器等用简体版

原文原文鏈接

前言：咱們在碼代碼的時候，常常會遇到須要給第一個或者最後一個元素添加或刪除樣式，還有一些比較特殊的是選取第幾個元素添加或刪除樣式，下面記錄css選擇器中常見的選擇器:相鄰兄弟選擇器（+）、子選擇器（>）、兄弟選擇器（~）、first-child、:last-child、:nth-child()、:nth-last-child()的用法。

相鄰兄弟選擇器（+）

相鄰兄弟選擇器可選擇緊接在另外一個元素後的元素，且兩者具備相同的父親元素。註釋：與子結合符同樣，相鄰兄弟結合符旁邊能夠有空白符。
器。css

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>相鄰兄弟選擇器</title>
    <style type="text/css">
        h1+p{
            color:red;
        }
    </style>
</head>
 
<body>
    <p>Hello word!</p>
    <p>Hello word!</p>
    <h1>Hello word!</h1>
    <p>Hello word!</p>
    <p>Hello word!</p>
    <p>Hello word!</p>
    <p>Hello word!</p>
</body>
</html>

效果圖以下：html

兄弟只會影響下面的p標籤的樣式，不影響上面兄弟的樣式。
注意這裏的’+’的意義跟’and’意義不同，兄弟選擇器的樣式是應用在兄弟元素上，跟參照的元素樣式無關，如上例隻影響p元素的樣式，而不影響h1標籤的樣式。
固然這個也會循環查找，即當兩個兄弟元素相同時，會再一次循環查找：
　　示例：測試

<style type="text/css">
    li + li {
        color:red;
    }
</style>

<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
</div>

能夠看出第一個li字體顏色沒有變紅，第二個和第三個元素字體變紅，這就是由於第三個li是第二個li的兄弟元素，因此也會應用樣式。字體

兄弟選擇器（~）

做用是查找某一個指定元素的後面的全部兄弟結點。
示例代碼：ui

<style type="text/css">
    h1 ~ p{
        color:red;
    }
</style>
</head>
<body>
    <p>1</p>
    <h1>2</h1>
    <p>3</p>
    <p>4</p>
    <p>5</p>
</body>

效果展現：
spa

後代選擇器（包含選擇器）

能夠選擇某元素後代的元素（子子孫孫元素）ssr

子選擇器（>）

只能選擇做爲某元素兒子元素的元素，不包括孫元素、曾孫元素等等等。code

後代選擇器，子選擇器和相鄰兄弟選擇器結合使用示例：

請看下面這個選擇器：htm

html > body table + ul {margin-top:20px;}
這個選擇器解釋爲：選擇緊接在 table 元素後出現的第一個相鄰兄弟 ul 元素，該 table 元素包含在一個 body 元素中，body 元素自己是 html 元素的子元素。圖片

:first-child 選擇器

li:first-child
{
background:yellow;
}

<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>可口可樂</li>
</ul>

<ol>
  <li>咖啡</li>
  <li>茶</li>
  <li>可口可樂</li>
</ol>

效果圖

值得注意的是，若是其父元素的第一個元素（p）不是該指定類型元素（li），則第一個元素不會有樣式

li:first-child
{
background:yellow;
}

<ol>
  <p>測試</p>
  <li>咖啡</li>
  <li>茶</li>
  <li>可口可樂</li>
</ol>

效果圖

:last-child選擇器

:last-child 選擇器匹配屬於其父元素的最後一個子元素的每一個元素。

提示：p:last-child 等同於 p:nth-last-child(1)。

eg：指定屬於其父元素的最後一個子元素的 p 元素的背景色：

p:last-child
{ 
background:#ff0000;
}

<body>

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

</body>

效果：

說明：p標籤的父元素是body，body標籤中最後一個p元素是第五個段落

:nth-child()

:nth-child() 選擇器，該選擇器選取父元素的第 N 個子元素，與類型無關。

p:nth-child(2)
{
background:#ff0000;
}

<body>

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

<p><b>註釋：</b>Internet Explorer 不支持 :nth-child() 選擇器。</p>

</body>

:nth-child()的詳細用法

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)

:nth-of-type(n) 選擇器匹配屬於父元素的特定類型的第 N 個子元素的每一個元素.

n 能夠是數字、關鍵詞或公式。

p:nth-of-type(2)
{
background:#ff0000;
}

<body>

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

</body>

效果圖：

:nth-last-child() 選擇器

:nth-last-child(n) 選擇器匹配屬於其元素的第 N 個子元素的每一個元素，不論元素的類型，從最後一個子元素開始計數。

n 能夠是數字、關鍵詞或公式。

提示：請參閱 :nth-last-of-type() 選擇器，該選擇器選取父元素的第 N 個指定類型的子元素，從最後一個子元素開始計數。

CSS3 :not 選擇器

:not(selector) 選擇器匹配非指定元素/選擇器的每一個元素。

更多css選擇器請參考：CSS 選擇器參考手冊
http://www.w3school.com.cn/cs...

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。