CSS基礎選擇器

基礎選擇器比較簡單，主要有標籤選擇器（元素選擇器），類選擇器，多類名選擇器，ID選擇器，萬用字元選擇器。以上都比較簡單，在這裡我們主要說一下複合選擇器

CSS複合選擇器

複合選擇器是由兩個或多個基礎選擇器，通過不同的方式組合而成的,目的是為了可以選擇更準確更精細的目標元素標籤。

交集選擇器

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

記憶技巧：

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

比如： p.one 選擇的是： 類名為 .one 的 段落標籤。

用的相對來說比較少

並集選擇器

並集選擇器（CSS選擇器分組）是各個選擇器通過逗號連線而成的，任何形式的選擇器（包括標籤選擇器、class類選擇器id選擇器等），都可以作為並集選擇器的一部分。如果某些選擇器定義的樣式完全相同，或部分相同，就可以利用並集選擇器為它們定義相同的CSS樣式。

記憶技巧：

並集選擇器 和 的意思， 就是說，只要逗號隔開的，所有選擇器都會執行後面樣式。

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

後代選擇器

後代選擇器又稱為包含選擇器，用來選擇元素或元素組的後代，其寫法就是把外層標籤寫在前面，內層標籤寫在後面，中間用空格分隔。當標籤發生巢狀時，內層標籤就成為外層標籤的後代。

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

子元素選擇器

子元素選擇器只能選擇作為某元素子元素的元素。其寫法就是把父級標籤寫在前面，子級標籤寫在後面，中間跟一個 進行連線，注意，符號左右兩側各保留一個空格。

白話： 這裡的子 指的是 親兒子 不包含孫子 重孫子之類。

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

偽類選擇器

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

類 .one (前面一個點)

偽類 :link （前面兩個點）

為了和我們剛才學的類選擇器相區別， 類選擇器是一個點 比如 .demo {} 而我們的偽類 用 2個點 就是 冒號 比如 :link{}

連結偽類選擇器

:link      /* 未訪問的連結 */
:visited   /* 已訪問的連結 */
:hover     /* 滑鼠移動到連結上 */
:active    /* 選定的連結 */

注意寫的時候，他們的順序不可以顛倒 按照 lvha 的順序。

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