選擇器之相鄰兄弟選擇器、後代選擇器、子代選擇器
阿新 • • 發佈：2018-12-25
相鄰兄弟選擇器
相鄰兄弟選擇器困擾我很久了，從字面上理解感覺還是很好理解，但是就是不會使用，也是查了很多資料，最後才真正的解決了，也能夠比較正常的使用。下面是我整理的一些相關筆記。
選擇相鄰兄弟
如果需要選擇緊接在另一個元素後的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器（Adjacent sibling selector）。
語法解釋
相鄰兄弟選擇器使用了加號（+），即相鄰兄弟結合符（Adjacent sibling combinator）。
註釋：與子結合符一樣，相鄰兄弟結合符旁邊可以有空白符。
請看下面這個文件樹片段：
<!DOCTYPE HTML> 
在上面的片段中，div 元素中包含兩個列表：一個無序列表，一個有序列表，每個列表都包含三個列表項。這兩個列表是相鄰兄弟，列表項本身也是相鄰兄弟。不過，第一個列表中的列表項與第二個列表中的列表項不是相鄰兄弟，因為這兩組列表項不屬於同一父元素（最多隻能算堂兄弟）。
請記住，用一個結合符只能選擇兩個相鄰兄弟中的第二個元素。
上面這個選擇器只會把列表中的第二個和第三個列表項變為粗體。第一個列表項不受影響。
後代選擇器
語法解釋
h1 em {color:red;} 表示的是從h1開始裡面包含的所有的em元素變成紅色，h1為祖先，其他的em都是後代，即選中後代，不管是兒子還是孫子，只要是都會被選中，為後代選擇器。
<html>
<head>
<meta charset="utf-8">
<title>zyy</title>
<style>
h1 em{
color:red;
}
</style>
</head>
<body>
<p>zyy-zyy</p>
<h1>zyy -zyy<b>zyy -zyy <em>zyy -zyy </em></b></h1>
</script>
</body>
</html>
子代選擇器
語法：h1>em{color:red;} 表示的是從h1開始裡面的第一層em元素變成紅色，h1為祖先，em為兒子，就像世襲制一樣，只能傳給兒子，孫子和其他堂親都不行，