相邻兄弟选择器（+）、子选择器（）、兄弟选择器（~）等用法
相鄰兄弟選擇器（+）
相鄰兄弟選擇器可選擇緊接在另一個(gè)元素后的元素，且二者具有相同的父親元素。注釋：與子結(jié)合符一樣，相鄰兄弟結(jié)合符旁邊可以有空白符。
器。
效果圖如下：
兄弟只會(huì)影響下面的p標(biāo)簽的樣式，不影響上面兄弟的樣式。
注意這里的’+’的意義跟’and’意義不一樣，兄弟選擇器的樣式是應(yīng)用在兄弟元素上，跟參照的元素樣式無(wú)關(guān)，如上例只影響p元素的樣式，而不影響h1標(biāo)簽的樣式。
當(dāng)然這個(gè)也會(huì)循環(huán)查找，即當(dāng)兩個(gè)兄弟元素相同時(shí)，會(huì)再一次循環(huán)查找：
示例：
可以看出第一個(gè)li字體顏色沒(méi)有變紅，第二個(gè)和第三個(gè)元素字體變紅，這就是因?yàn)榈谌齻€(gè)li是第二個(gè)li的兄弟元素，所以也會(huì)應(yīng)用樣式。
兄弟選擇器（~）
作用是查找某一個(gè)指定元素的后面的所有兄弟結(jié)點(diǎn)。
示例代碼：
效果展示：
后代選擇器（包含選擇器）
可以選擇某元素后代的元素（子子孫孫元素）
子選擇器（>）
只能選擇作為某元素兒子元素的元素，不包括孫元素、曾孫元素等等等。
后代選擇器，子選擇器和相鄰兄弟選擇器結(jié)合使用示例：
請(qǐng)看下面這個(gè)選擇器：
html > body table + ul {margin-top:20px;}
這個(gè)選擇器解釋為：選擇緊接在 table 元素后出現(xiàn)的第一個(gè)相鄰兄弟 ul 元素，該 table 元素包含在一個(gè) body 元素中，body 元素本身是 html 元素的子元素。
:first-child 選擇器
li:first-child { background:yellow; } <ul><li>咖啡</li><li>茶</li><li>可口可樂(lè)</li> </ul><ol><li>咖啡</li><li>茶</li><li>可口可樂(lè)</li> </ol>效果圖
值得注意的是，如果其父元素的第一個(gè)元素（p）不是該指定類型元素（li），則第一個(gè)元素不會(huì)有樣式
li:first-child { background:yellow; } <ol><p>測(cè)試</p><li>咖啡</li><li>茶</li><li>可口可樂(lè)</li> </ol>效果圖
:last-child選擇器
:last-child 選擇器匹配屬于其父元素的最后一個(gè)子元素的每個(gè)元素。
提示：p:last-child 等同于 p:nth-last-child(1)。
eg：指定屬于其父元素的最后一個(gè)子元素的 p 元素的背景色：
p:last-child { background:#ff0000; } <body><h1>這是標(biāo)題</h1> <p>第一個(gè)段落。</p> <p>第二個(gè)段落。</p> <p>第三個(gè)段落。</p> <p>第四個(gè)段落。</p> <p>第五個(gè)段落。</p></body>效果：
說(shuō)明：p標(biāo)簽的父元素是body，body標(biāo)簽中最后一個(gè)p元素是第五個(gè)段落
:nth-child()
:nth-child() 選擇器，該選擇器選取父元素的第 N 個(gè)子元素，與類型無(wú)關(guān)。
p:nth-child(2) { background:#ff0000; } <body><h1>這是標(biāo)題</h1> <p>第一個(gè)段落。</p> <p>第二個(gè)段落。</p> <p>第三個(gè)段落。</p> <p>第四個(gè)段落。</p><p><b>注釋：</b>Internet Explorer 不支持 :nth-child() 選擇器。</p></body>:nth-child()的詳細(xì)用法
nth-child(3) 表示選擇列表中的第三個(gè)元素。
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個(gè)開始到最后（>=3）
nth-child(-n+3) 表示選擇列表中的標(biāo)簽從0到3，即小于3的標(biāo)簽(<=3)
nth-last-child(3) 表示選擇列表中的倒數(shù)第3個(gè)標(biāo)簽
:nth-of-type(n)
:nth-of-type(n) 選擇器匹配屬于父元素的特定類型的第 N 個(gè)子元素的每個(gè)元素.
n 可以是數(shù)字、關(guān)鍵詞或公式。
p:nth-of-type(2) { background:#ff0000; } <body><h1>這是標(biāo)題</h1> <p>第一個(gè)段落。</p> <div>測(cè)試</div> <p>第二個(gè)段落。</p> <p>第三個(gè)段落。</p> <p>第四個(gè)段落。</p> <p>第五個(gè)段落。</p></body>效果圖：
:nth-last-child() 選擇器
:nth-last-child(n) 選擇器匹配屬于其元素的第 N 個(gè)子元素的每個(gè)元素，不論元素的類型，從最后一個(gè)子元素開始計(jì)數(shù)。
n 可以是數(shù)字、關(guān)鍵詞或公式。
提示：請(qǐng)參閱 :nth-last-of-type() 選擇器，該選擇器選取父元素的第 N 個(gè)指定類型的子元素，從最后一個(gè)子元素開始計(jì)數(shù)。
總結(jié)
以上是生活随笔為你收集整理的相邻兄弟选择器（+）、子选择器（）、兄弟选择器（~）等用法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 008 RestFul API 拦截器
- 下一篇： 2018-2019-1 20165330