子元素選擇器，就是選中某個元素下的子元素，然後對該子元素設置CSS樣式。
語法：
說明：
父元素與子元素必須用空格隔開，從而表示選中某個元素下的子元素。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#father1 div{color:blue;}
#father2 #p1{color:red;}
</style>
</head>
<body>
<div id="father1">
<div> 學習網</div>
<div> 學習網</div>
</div>
<div id="father2">
<p id="p1"> 學習網</p>
<p id="p2"> 學習網</p>
<span> 學習網</span>
</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
“#father1 div{…}”表示選擇“id為father1的元素”下的所有div元素；
“#father2 #p1{…}”表示選擇“id為father2的元素”下的子元素，其中子元素的id為#p1。因為“id為father2的元素”下的第2個p元素沒有被選中，所以第2個p元素內容沒有變成紅色。
相鄰選擇器，就是選中該元素的下一個兄弟元素，在這裡注意一點，相鄰選擇器的操作對象是該元素的同級元素。
語法：
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#lv+div{color:red;}
</style>
</head>
<body>
<div> 學習網</div>
<div id="lv">
<p> 學習網</p>
</div>
<div> 學習網</div>
<div> 學習網</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
“#lv+div{…}”表示選擇“id為lv的元素”的相鄰的下一個兄弟元素div，也就是第3個div元素。
群組選擇器，就是同時對幾個選擇器進行相同的操作。常常，我們的CSS 樣式中會有好幾個地方需要使用到相同的設定時，一個一個分開寫會是一件滿累人的工作，重覆性太高且顯得冗長，更不好管理....在CSS 語法的基本設定中，就可以把這幾個相同設定的選擇器合並在一起，原本可能是寫了7~8 行相同的語法，合在一起後就只要短短的一小行，怎麼看都讓人心曠神怡啊~
語法：
說明：
對於群組選擇器，兩個選擇器之間必須用“,”（英文逗號）隔開，不然群組選擇器無法生效。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
h3,div,p,span{color:red;}
</style>
</head>
<body>
<h3> 學習網</h3>
<div> 學習網</div>
<p> 學習網</p>
<span> 學習網</span>
</body>
</html>
在浏覽器預覽效果如下：
分析：
“h3,div,p,span{color:red;}”表示選中所有的h3元素、div元素、p元素和span元素，然後設置這些元素的字體顏色為red。
<style type="text/css">
h3,div,p,span{color:red;}
</style>
其實上面這段代碼等價於以下代碼：
<style type="text/css">
h3{color:red;}
div{color:red;}
p{color:red;}
span{color:red;}
</style>
現在大家知道使用群組選擇器的效率有多高了吧！
這一章介紹的CSS選擇器的使用頻率占所有選擇器的80%以上，對於初學者來說，已經完全夠用了。所以大家現在不急於學習其他的選擇器，否則容易會產生混淆。對於剩下的選擇器的使用方法和技巧，我們在“CSS進階教程”會詳細給大家講解，敬請大家關注！