1. 後代選擇器

概念：後代選擇器又稱為包含選擇器。

作用：用來選擇元素或元素組的子孫後代。

     其寫法就是把外層標籤寫在前面，內層標籤寫在後面，中間用空格分隔，先寫父親爺爺，在寫兒子孫子。

  格式：父級 子級{屬性:屬性值;屬性:屬性值;}

     語法：.class h3{color:red;font-size:16px;}

• 當標籤發生巢狀時，內層標籤就成為外層標籤的後代。

• 子孫後代都可以這麼選擇。 或者說，它能選擇任何包含在內 的標籤。

2. 子元素選擇器

作用：子元素選擇器只能選擇作為某元素子元素(親兒子)的元素。

其寫法就是把父級標籤寫在前面，子級標籤寫在後面，中間跟一個 >

語法：.class>h3{color:red;font-size:14px;}

 比如：  .demo > h3 {color: red;}   說明  h3 一定是demo 親兒子。  demo 元素包含著h3。

1.3 交集選擇器

條件：交集選擇器由兩個選擇器構成，找到的標籤必須滿足：既有標籤一的特點，也有標籤二的特點。

語法：h3.class{ color:red; }

其中第一個為標籤選擇器，第二個為class選擇器，兩個選擇器之間不能有空格，如h3.special。

交集選擇器 是 並且的意思。 即...又...的意思

比如：   p.one   選擇的是： 類名為 .one  的 段落標籤，但用的相對來說比較少。
 

4. 並集選擇器

應用：如果某些選擇器定義的相同樣式，就可以利用並集選擇器，可以讓程式碼更簡潔。

並集選擇器（CSS選擇器分組）是各個選擇器通過,連線而成的，通常用於集體宣告。

語法：.class,h3 {color:red;}

任何形式的選擇器（包括標籤選擇器、class類選擇器id選擇器等），都可以作為並集選擇器的一部分。

記憶技巧：並集選擇器通常用於集體宣告 ，逗號隔開的，所有選擇器都會執行後面樣式，逗號可以理解為 和的意思。

比如  .one, p , #test {color: #F00;}  
表示   .one 和 p  和 #test 這三個選擇器都會執行顏色為紅色,通常用於集體宣告。  
 

他和他，在一起， 在一起 一起的意思

5. 連結偽類選擇器

偽類選擇器：和類選擇器相區別類選擇器是一個點 比如 .demo {} 而我們的偽類 用 2個點 就是 冒號 比如 :link{} 。

作用：用於向某些選擇器新增特殊的效果。比如給連結新增特殊效果， 比如可以選擇 第1個，第n個元素。

因為偽類選擇器很多，比如連結偽類，結構偽類等等。我們這裡先給大家講解連結偽類選擇器。

• a:link /* 未訪問的連結 */

• a:visited /* 已訪問的連結 */

• a:hover /* 滑鼠移動到連結上 */

• a:active /* 選定的連結 */

注意

• 寫的時候，他們的順序儘量不要顛倒 按照 lvha(四類的首字母) 的順序。否則可能引起錯誤。

• 因為叫連結偽類，所以都是利用交集選擇器 a:link a:hover

• 因為a連結瀏覽器具有預設樣式，所以我們實際工作中都需要給連結單獨指定樣式。

• 實際開發中，我們很少寫全四個狀態，一般我們寫法如下：

a {   /* a是標籤選擇器  所有的連結 */
            font-weight: 700;
            font-size: 16px;
            color: gray;
}
a:hover {   /* :hover 是連結偽類選擇器 滑鼠經過 */
            color: red; /*  滑鼠經過的時候，由原來的 灰色 變成了紅色 */
}

6. 複合選擇器總結