本文小編為大家詳細介紹“CSS相鄰兄弟選擇器、子選擇器和兄弟選擇器怎么用”，內(nèi)容詳細，步驟清晰，細節(jié)處理妥當，希望這篇“CSS相鄰兄弟選擇器、子選擇器和兄弟選擇器怎么用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。
平鄉(xiāng)網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)！從網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、APP開發(fā)、響應式網(wǎng)站建設等網(wǎng)站項目制作，到程序開發(fā)，運營維護。成都創(chuàng)新互聯(lián)于2013年成立到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設就選成都創(chuàng)新互聯(lián)。
前言：我們在碼代碼的時候，經(jīng)常會遇到需要給第一個或者最后一個元素添加或刪除樣式，還有一些比較特殊的是選取第幾個元素添加或刪除樣式，下面記錄css選擇器中常見的選擇器：相鄰兄弟選擇器（+）、子選擇器（>）、兄弟選擇器（——）、first-child、：last-child、：nth-child（）、：nth-last-child（）的用法。
相鄰兄弟選擇器（+）
相鄰兄弟選擇器可選擇緊接在另一個元素后的元素，且二者具有相同的父親元素。注釋：與子結(jié)合符一樣，相鄰兄弟結(jié)合符旁邊可以有空白符。
器。
在學習上有什么疑問隨時可以找我我，與大家分享互聯(lián)網(wǎng)web前端實戰(zhàn)操作，無論你是否有基礎，我都歡迎。點：前端技術分享
Hello word!
Hello word!
Hello word!
Hello word!
Hello word!
Hello word!
效果圖如下：
兄弟只會影響下面的p標簽的樣式，不影響上面兄弟的樣式。
注意這里的’+’的意義跟’and’意義不一樣，兄弟選擇器的樣式是應用在兄弟元素上，跟參照的元素樣式無關，如上例只影響p元素的樣式，而不影響h2標簽的樣式。
當然這個也會循環(huán)查找，即當兩個兄弟元素相同時，會再一次循環(huán)查找：
示例：
可以看出第一個li字體顏色沒有變紅，第二個和第三個元素字體變紅，這就是因為第三個li是第二個li的兄弟元素，所以也會應用樣式。
兄弟選擇器（——）
作用是查找某一個指定元素的后面的所有兄弟結(jié)點。
示例代碼：
1
3
4
5
效果展示：
后代選擇器（包含選擇器）
可以選擇某元素后代的元素（子子孫孫元素）
子選擇器（>）
只能選擇作為某元素兒子元素的元素，不包括孫元素、曾孫元素等等等。
后代選擇器，子選擇器和相鄰兄弟選擇器結(jié)合使用示例：
請看下面這個選擇器：
html > body table + ul {margin-top:20px;}
這個選擇器解釋為：選擇緊接在 table 元素后出現(xiàn)的第一個相鄰兄弟 ul 元素，該 table 元素包含在一個 body 元素中，body 元素本身是 html 元素的子元素。
：first-child 選擇器
li:first-child
{
background:yellow;
}
效果圖
值得注意的是，如果其父元素的第一個元素（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;
}
第一個段落。
第二個段落。
第三個段落。
第四個段落。
第五個段落。
效果：
說明：p標簽的父元素是body，body標簽中最后一個p元素是第五個段落
：nth-child（）
：nth-child（） 選擇器，該選擇器選取父元素的第 N 個子元素，與類型無關。
p:nth-child（2）
{
background:#ff0000;
}
第一個段落。
第二個段落。
第三個段落。
第四個段落。
注釋：Internet Explorer 不支持 :nth-child（） 選擇器。
：nth-child（）的詳細用法
nth-child（3） 表示選擇列表中的第三個元素。
nth-child（2n）表示列表中的偶數(shù)標簽，即選擇第2、第4、第6……標簽
nth-child（2n-1） 表示選擇列表中的奇數(shù)標簽，即選擇 第1、第3、第5、第7……標簽
nth-child（n+3） 表示選擇列表中的標簽從第3個開始到最后（>=3）
nth-child（-n+3） 表示選擇列表中的標簽從0到3，即小于3的標簽（<=3）
nth-last-child（3） 表示選擇列表中的倒數(shù)第3個標簽
：nth-of-type（n）
：nth-of-type（n） 選擇器匹配屬于父元素的特定類型的第 N 個子元素的每個元素。
n 可以是數(shù)字、關鍵詞或公式。
p:nth-of-type（2）
{
background:#ff0000;
}
第一個段落。
第二個段落。
第三個段落。
第四個段落。
第五個段落。
效果圖：
：nth-last-child（） 選擇器
：nth-last-child（n） 選擇器匹配屬于其元素的第 N 個子元素的每個元素，不論元素的類型，從最后一個子元素開始計數(shù)。
n 可以是數(shù)字、關鍵詞或公式。
提示：請參閱 :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;
}
讀到這里，這篇“CSS相鄰兄弟選擇器、子選擇器和兄弟選擇器怎么用”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內(nèi)容的文章，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
重慶分公司
重慶分公司
