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

湟中ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18982081108（備注：SSL證書合作）期待與您的合作！

相鄰兄弟選擇器（+）

相鄰兄弟選擇器可選擇緊接在另一個元素后的元素，且二者具有相同的父親元素。注釋：與子結(jié)合符一樣，相鄰兄弟結(jié)合符旁邊可以有空白符。
器。

    
    
    



    
Hello word!
    
Hello word!
    
Hello word!
    
Hello word!
    
Hello word!
    
Hello word!
    
Hello word!


web前端開發(fā)學(xué)習(xí)Q-q-u-n： 731771211，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法（詳細(xì)的前端項目實戰(zhàn)教學(xué)視頻，PDF）

效果圖如下：

兄弟只會影響下面的p標(biāo)簽的樣式，不影響上面兄弟的樣式。
注意這里的’+’的意義跟’and’意義不一樣，兄弟選擇器的樣式是應(yīng)用在兄弟元素上，跟參照的元素樣式無關(guān)，如上例只影響p元素的樣式，而不影響h2標(biāo)簽的樣式。
當(dāng)然這個也會循環(huán)查找，即當(dāng)兩個兄弟元素相同時，會再一次循環(huán)查找：
示例：

  

    
List item 1
    
List item 2
    
List item 3
  

可以看出第一個li字體顏色沒有變紅，第二個和第三個元素字體變紅，這就是因為第三個li是第二個li的兄弟元素，所以也會應(yīng)用樣式。

兄弟選擇器（~）

作用是查找某一個指定元素的后面的所有兄弟結(jié)點。
示例代碼：

    
1
    
2
    
3
    
4
    
5

web前端開發(fā)學(xué)習(xí)Q-q-u-n： 731771211，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法（詳細(xì)的前端項目實戰(zhàn)教學(xué)視頻，PDF）

效果展示：

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

可以選擇某元素后代的元素（子子孫孫元素）

子選擇器（>）

只能選擇作為某元素兒子元素的元素，不包括孫元素、曾孫元素等等等。

后代選擇器，子選擇器和相鄰兄弟選擇器結(jié)合使用示例：

請看下面這個選擇器：

html > body table + ul {margin-top:20px;}
這個選擇器解釋為：選擇緊接在 table 元素后出現(xiàn)的第一個相鄰兄弟 ul 元素，該 table 元素包含在一個 body 元素中，body 元素本身是 html 元素的子元素。

:first-child 選擇器

li:first-child
{
background:yellow;
}

  
咖啡
  
茶
  
可口可樂



  
咖啡
  
茶
  
可口可樂

web前端開發(fā)學(xué)習(xí)Q-q-u-n： 731771211，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法（詳細(xì)的前端項目實戰(zhàn)教學(xué)視頻，PDF）

效果圖

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

li:first-child
{
background:yellow;
}

  
測試
  
咖啡
  
茶
  
可口可樂

效果圖

:last-child選擇器

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

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

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

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

這是標(biāo)題
第一個段落。
第二個段落。
第三個段落。
第四個段落。
第五個段落。

效果：

說明：p標(biāo)簽的父元素是body，body標(biāo)簽中最后一個p元素是第五個段落

:nth-child()

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

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

這是標(biāo)題
第一個段落。
第二個段落。
第三個段落。
第四個段落。

注釋：Internet Explorer 不支持 :nth-child() 選擇器。

:nth-child()的詳細(xì)用法

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

nth-child(2n)表示列表中的偶數(shù)標(biāo)簽，即選擇第2、第4、第6……標(biāo)簽

nth-child(2n-1) 表示選擇列表中的奇數(shù)標(biāo)簽，即選擇 第1、第3、第5、第7……標(biāo)簽

nth-child(n+3) 表示選擇列表中的標(biāo)簽從第3個開始到最后（>=3）

nth-child(-n+3) 表示選擇列表中的標(biāo)簽從0到3，即小于3的標(biāo)簽(<=3)

nth-last-child(3) 表示選擇列表中的倒數(shù)第3個標(biāo)簽

:nth-of-type(n)

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

n 可以是數(shù)字、關(guān)鍵詞或公式。

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

這是標(biāo)題
第一個段落。
測試
第二個段落。
第三個段落。
第四個段落。
第五個段落。


web前端開發(fā)學(xué)習(xí)Q-q-u-n： 731771211，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法（詳細(xì)的前端項目實戰(zhàn)教學(xué)視頻，PDF）

效果圖：

:nth-last-child() 選擇器

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

n 可以是數(shù)字、關(guān)鍵詞或公式。

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

CSS3 :not 選擇器

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

擴展

菜單欄右邊框的實現(xiàn)方法有多種，結(jié)合上面介紹的選擇器，實現(xiàn)方法分別如下：

一、常規(guī)方法：

.nav li{
    border-right:1px solid #fff;
}
.nav li:last-child{
    border-right-width:0px;
}

二：結(jié)合相鄰兄弟選擇器（+）

.nav li + li{
    border-left:1px solid #fff;
}

三、結(jié)合兄弟選擇器（~）

.nav li:first-child ~ li{
    border-left:1px solid #fff;
}

四、結(jié)合:not()選擇器

.nav li:not(:last-child){
    border-right:1px solid #fff;
}