CSS符合選擇器

CSS複合選擇器

1. 後代選擇器

   • 後代選擇器又稱為包含選擇器，可以選擇父元素裡面的子元素。其寫法就是把外層標簽寫在前面，內層標簽寫在後面，中間用空格分隔，當標簽發生嵌套時，內層標簽就成為外層標簽的後代

   • 元素1 元素2 {樣式聲明}

   • 【註意】

     • 元素1 和元素2 中間用空格隔開
     • 元素1是父級，元素2是子級，最終選擇的是元素2
     • 元素2可以是兒子，也可以是孫子，只要元素1的後代即可

2. 子選擇器

   • 子元素選擇器（子選擇器）只能選擇作為某元素的最近一級子元素，簡單理解就是選親兒子元素

   • 元素1 > 元素2 {樣式聲明}

   • 【註意】

     • 元素1和元素2 中間用大於號隔開
     • 元素1 是父級，元素2 是子級，最終選擇的是元素2
     • 元素2 必須是親兒子，其孫子、重孫之類都不歸他管

3. 並集選擇器

   • 並集選擇器可以選擇多組標簽，同時為他們定義相同的樣式。通常用於集體聲明

   • 並集選擇器是各種選擇器通過英文逗號（，）鏈接而成，任何形式的選擇器都可以作為並集選擇器的一部分

   • 元素1，元素2{樣式聲明}

   • 【註意】

     • 元素1和元素2中間用逗號隔開
     • 逗號可以理解為和的意思
     • 畢竟選擇器通常用於集體聲明

4. 偽類選擇器

   • 偽類選擇器用於想某些選擇器添加特殊的效果，比如給鏈接添加特殊效果，或則選擇第一個，第n個元素

   • 偽類選擇器書寫最大的特點是用冒號（：）表示，比如：hover、：first-child

   • 鏈接偽類選擇器

     • a:link  /* 選擇所有未被訪問的鏈接*/
       a:visited /* 選擇所有已被訪問的鏈接*/
       a:hover /*選擇滑鼠指針位於其上的鏈接*/
       a:active /*選擇活動鏈接（滑鼠按下未彈起的鏈接）*/

5. 偽類選擇器註意事項

   • 為了確保生效，請按照LAHA的迴圈順序聲明 :link :visited :hover :active
   • a標簽在瀏覽器中具有預設樣式，所以我們實際工作中都需要給鏈接單獨指定樣式

6. 鏈接偽類選擇器

   a{
     color：red；
   }
   a：hover{
      coloe：gray； /* 滑鼠經過的時候，原來的紅色 變成 灰色 *  /
   }

7. ：focus偽類選擇器

   • ：focus偽類選擇器用於選取獲得焦點的表單元素

   • 焦點就是游標，一般情況<input> 類表單元素才能獲取，因此這個選擇器也主要針對於表單元素來說

   • inpt：focus{
       background-color：yellow；
     }