CSS選擇器相鄰兄弟選擇器（+）、:first-child、:last-child、:nth-child()、nth-of-type()，:focus等的用法
前言：我們在碼程式碼的時候，經常會遇到需要給第一個或者最後一個元素新增或刪除樣式，還有一些比較特殊的是選取第幾個元素新增或刪除樣式，下面記錄css選擇器中常見的相鄰兄弟選擇器（+）、子元素選擇器（>）:first-child、:last-child、:nth-child()、:nth-last-child()的用法。
相鄰兄弟選擇器（+）
相鄰兄弟選擇器（+）可選擇緊接在另一元素後的元素，且二者有相同父元素。
h1 + p {margin-top:50px;}
這個選擇器讀作：“選擇緊接在 h1 元素後出現的段落，h1 和 p 元素擁有共同的父元素”。
<div>
< 在上面的片段中，div 元素中包含兩個列表：一個無序列表，一個有序列表，每個列表都包含三個列表項。這兩個列表是相鄰兄弟，列表項本身也是相鄰兄弟。不過，第一個列表中的列表項與第二個列表中的列表項不是相鄰兄弟，因為這兩組列表項不屬於同一父元素（最多隻能算堂兄弟）。
請記住，用一個結合符只能選擇兩個相鄰兄弟中的第二個元素。請看下面的選擇器：
li + li {font-weight:bold;color:red;}
效果圖：
結合其它選擇器
相鄰兄弟結合符還可以結合其他結合符：
html > body table + ul {margin-top:20px;}
這個選擇器解釋為：選擇緊接在 table 元素後出現的所有兄弟 ul 元素，該 table 元素包含在一個 body 元素中，body 元素本身是 html 元素的子元素。
:first-child
:first-child 選擇器用於選取屬於其父元素的首個子元素的指定選擇器。
< li:first-child
{
background:yellow;
}
效果圖：
值得注意的是，如果其父元素的第一個元素（p）不是該指定型別元素（li），則第一個元素不會有樣式
<ol>
<p>測試</p>
<li>咖啡</li>
<li>茶</li>
<li>可口可樂</li>
</ol>
li:first-child
{
background:yellow;
}
效果圖：
:last-child
:last-child 選擇器匹配屬於其父元素的最後一個子元素的每個元素。
提示：p:last-child 等同於 p:nth-last-child(1)。
<body>
<h1>這是標題</h1>
<p>第一個段落。</p>
<p>第二個段落。</p>
<p>第三個段落。</p>
<p>第四個段落。</p>
<p>第五個段落。</p>
</body>
p:last-child
{
background:#ff0000;
}
效果圖：
說明：說明：p標籤的父元素是body，body標籤中最後一個p元素是第五個段落。如果父元素body中的最後一個元素不是p元素，則不會有任何的樣式變化。總之，:first-child、:last-child都是指定型別元素。
nth-child(n)
:nth-child(n) 選擇器匹配屬於其父元素的第 N 個子元素，不論元素的型別。
n 可以是數字、關鍵詞或公式。
<!DOCTYPE html>
<html>
<head>
<style>
p:nth-child(2)
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>這是標題</h1>
<p>第一個段落。</p>
<p>第二個段落。</p>
<p>第三個段落。</p>
<p>第四個段落。</p>
</body>
</html>
效果圖：
:nth-child()的詳細用法
- 使用公式 (an + b)。描述：表示週期的長度，n 是計數器（從 0 開始），b 是偏移值。
- :nth-child(3) 表示選擇列表中的第三個元素。
- :nth-child(2n)表示列表中的偶數標籤，即選擇第2、第4、第6……標籤
- :nth-child(2n-1) 表示選擇列表中的奇數標籤，即選擇 第1、第3、第5、第7……標籤
- :nth-child(n+3) 表示選擇列表中的標籤從第3個開始到最後（>=3）
- :nth-child(-n+3) 表示選擇列表中的標籤從0到3，即小於3的標籤(<=3)
- :nth-last-child(3) 表示選擇列表中的倒數第3個標籤
- :nth-child(odd)表示匹配下標是奇數的元素
- :nth-child(even)表示匹配下標是偶數的元素
nth-of-type(n)
:nth-of-type(n) 選擇器匹配屬於父元素的特定型別的第 N 個子元素的每個元素.
n 可以是數字、關鍵詞或公式。
<body>
<h1>這是標題</h1>
<p>第一個段落。</p>
<div>測試</div>
<p>第二個段落。</p>
<p>第三個段落。</p>
<p>第四個段落。</p>
<p>第五個段落。</p>
</body>
p:nth-of-type(2)
{
background:#ff0000;
}
效果圖：
:focus選擇器
:focus 選擇器用於選取獲得焦點的元素。
提示：接收鍵盤事件或其他使用者輸入的元素都允許 :focus 選擇器。