1、什么是復合選擇器
在css中，可以根據選擇器的類型，把選擇器分為基礎選擇器和復合選擇器，復合選擇器是建立在基礎選擇器之上的，對基礎選擇器進行組合形成的
復合選擇器可以更准確、更高效的選擇目標元素（標簽）
復合選擇器是由兩個或多個基礎選擇器，通過不同的方式組合而成的
常用的復合選擇器：后代選擇器、子選擇器、並集選擇器、偽類選擇器等等
2、后代選擇器
（1）后代選擇器又稱為包含選擇器，可以選擇父元素里面的子元素。其寫法就是把外層標簽寫在前面，內層標簽寫在后面，中間用空格分隔。當標簽發生嵌套時，內層標簽就發生外層標簽的后代
（2）舉例
<html> <head> <meta charset="utf-8"> <title></title> <style> ol li{ color: red; } </style> </head> <div></div> <body> <ol> <li>星期一</li> <li>星期二</li> <li>星期三</li> <li>星期四</li> </ol> </body> </html>
元素一是父親，元素二是孩子，最終修改的是元素二（孩子，可以是兒子、孫子... ...）
<html> <head> <meta charset="utf-8"> <title></title> <style> ol li a{ color: red; } </style> </head> <div></div> <body> <ol> <li><a href="#">星期一</a></li> </ol> </body> </html>
區分兩個相同的標簽元素：
<html> <head> <meta charset="utf-8"> <title></title> <style> ol li a{ color: red; } .nav li a{ color: yellow; } </style> </head> <div></div> <body> <ol> <li><a href="#">星期一</a></li> </ol> <ol class="nav"> <li><a href="#">星期二</a></li> </ol> </body> </html>
3、子選擇器
子選擇器只能選擇作為某元素的最近一級子元素
<html> <head> <meta charset="utf-8"> <title></title> <style> ol li a{ color: red; } .nav>a{ color: yellow; } </style> </head> <div></div> <body> <ol> <li><a href="#">星期一</a></li> </ol> <ol class="nav"> <a href="#">星期二</a> <li><a href="#">星期三</a></li> </ol> </body> </html>
元素一與元素二中間用 > 相分隔
4、並集選擇器
並集選擇器可以選擇多組標簽，同時為他們定義相同的樣式，通常用於集體聲明
（1）熊大和熊二都改為紅色：
<html> <head> <meta charset="utf-8"> <title></title> <style> div,p{ color: red; } </style> </head> <body> <div>熊大</div> <p>熊二</p> <span>光頭強</span> <ul class="pig"> <li>小豬佩奇</li> <li>豬爸爸</li> <li>豬媽媽</li> </ul> </body> </html>
元素之間用逗號分隔
（2）熊大、熊二和小豬一家都改為紅色：
<html> <head> <meta charset="utf-8"> <title></title> <style> div,p,.pig li{ color: red; } </style> </head> <body> <div>熊大</div> <p>熊二</p> <span>光頭強</span> <ul class="pig"> <li>小豬佩奇</li> <li>豬爸爸</li> <li>豬媽媽</li> </ul> </body> </html>
5、偽類選擇器
用於向某些選擇器添加特殊的效果，比如給鏈接添加特殊效果，或選擇第一個、第n個元素
偽類選擇器的最大特點是用冒號（：）表示
偽類選擇器的種類很多，例如：鏈接偽類、結構偽類
a:link 選擇所有未被訪問的鏈接
a:visited 選擇所有已經被訪問的鏈接
a:hover 選擇鼠標指針位於其上的鏈接
a:active 選擇活動鏈接（鼠標按下未彈起的鏈接）
<html> <head> <meta charset="utf-8"> <title></title> <style> a:link { /*未訪問的鏈接*/ color: #333; text-decoration: none; } a:visited { /*訪問過的鏈接*/ color: red; text-decoration: none; } a:hover { /*鼠標經過的時候的鏈接*/ color: deeppink; text-decoration: none; } a:active { /*活動鏈接*/ color: aquamarine; text-decoration: none; } </style> </head> <body> <a href="#">新聞</a> </body> </html>
為了確保偽類生效，需要按照LVHA的順序書寫：link-visited-hover-active（LV包包hao）
6、focus偽類選擇器
用於選擇獲得焦點的表單元素，焦點就是光標，一般情況下<input> 類表單元素才能獲取，因此這個選擇器也要針對於表單元素來說
<html> <head> <meta charset="utf-8"> <title></title> <style> input:focus{ background-color: red; } </style> </head> <body> <input type="text" /><br /> <input type="text" /><br /> <input type="text" /><br /> </body> </html>
