組合選擇器

群組（並集）選擇器

• 作用：給所有選擇器選中的標籤設定屬性，可以同時控制多個選擇器

• 格式：

  選擇器1, 選擇器2 {
      屬性: 值;
  }

• 注意點：

  • 必須使用,來連線
  • 選擇器可以使用標籤名稱、id名稱、類名稱

後代選擇器

• 作用：找到指定標籤的所有特定的後代標籤，設定屬性

• 格式：

  標籤名稱1 標籤名稱2 {
      屬性: 值;
  }

• 先找到所有名稱叫做“標籤名稱1”的標籤，然後再在這個標籤下面去查詢所有名稱叫做“標籤名稱2”的標籤，然後在設定屬性

• 注意點：

  • 後代選擇器必須用空格隔開
  • 後代不僅僅是兒子，也包括孫子/重孫子，只要最終是放到指定標籤中的都是後代
  • 後代選擇器不僅僅可以使用標籤名稱，還可以使用其它選擇器
  • 後代選擇器可以通過空格一直延續下去

子代選擇器

• 作用：找到指定標籤中所有特定的直接子元素，然後設定屬性

• 格式：

  標籤名稱1 > 標籤名稱2 {
      屬性: 值;
  }

• 先找到所有名稱叫做“標籤名稱1”的標籤，然後在這個標籤中查詢所有直接子元素名稱叫做“標籤名稱2”的元素

• 注意點：

  • 子元素選擇器只會查詢兒子，不會查詢其他被巢狀的標籤
  • 子元素選擇器之間需要用>連線
  • 子元素選擇器不僅僅可以使用標籤名稱，還可以使用其它選擇器
  • 子元素選擇器可以通過>
    符號一直延續下去

兄弟選擇器

相鄰兄弟選擇器

• 作用：給指定標籤後面緊跟的那個標籤設定屬性

• 格式：

  選擇器1 + 選擇器2 {
      屬性: 值;
  }

• 注意點：

  • 相鄰兄弟選擇器必須通過+連線
  • 相鄰兄弟選擇器只能選中緊跟其後的那個標籤，不能選中被隔開的標籤

通用兄弟選擇器

• 作用：給指定選擇器後面的所有選擇器選中的所有標籤設定屬性

• 格式：

  選擇器1 ~ 選擇器2 {
      屬性: 值;
  }

• 注意點：

  • 通用兄弟選擇器必須用~連線
  • 通用兄弟選擇器選中的是指定選擇器後面某個選擇器選中的所有標籤，無論有沒有被隔開都可以選中

交集選擇器

• 作用：給所有選擇器選中的標籤中，相交的那部分標籤設定屬性

• 格式：

  選擇器1選擇器2{
      屬性: 值;
  }

• 注意點：

  • 選擇器和選擇器之間沒有任何的連線符號
  • 擇器可以使用標籤名稱、id名稱、class名稱
  • 交集選擇器僅僅作為了解，企業開發中用的並不多

屬性選擇器

• [attr]：匹配擁有attr屬性的標籤
• [attr=val]：匹配擁有attr屬性，屬性值為val的標籤
• [attr^=val]：匹配擁有attr屬性，屬性值以val開頭的標籤
• [attr$=val]：匹配擁有attr屬性，屬性值以val結尾的標籤
• [attr*=val]：匹配擁有attr屬性，屬性值包含val的標籤

組合選擇器優先順序

• 組合選擇器優先順序與權值相關，權重為權值和
• 權值對應關係

• 選擇器權值比較，只關心權重和，不更新選擇器位置

• 不同級別的選擇器間不具備可比性：一個類選擇器優先順序高於n個標籤選擇器的任意組合

• 優先順序取決於權重，其實就是比較個數
• 不同的修飾符（後代、兄弟、交集...）均不影響權重
• 選擇器的位置也不會影響權重
• 權重只和個數有關
• id的權重無限大於class無限大於標籤

• 屬性選擇器的權重與類一樣

a標籤的四大偽類

/* 連結的初始狀態(未被訪問過) */
a:link {}

/* 連結被滑鼠懸浮 */
a:hover {}

/* 連結處於啟用狀態(滑鼠按下) */
a:active {}

/* 連結已被訪問過 */
a:visited {}

偽類選擇器

• 作用：選中指定的任意標籤然後設定屬性

• 同級別的第幾個：先確定位置再匹配型別

  • :first-child，選中同級別中的第一個標籤
  • :last-child，選中同級別中的最後一個標籤
  • :nth-child(n)，選中同級別中的第n個標籤
  • nth-last-child(n)，選中同級別中的倒數第n個標籤
  • :only-child，選中父元素中唯一的標籤

• 同級同類型的第幾個：先確定型別再匹配位置

  • :first-of-type，選中同級別中同類型的第一個標籤
  • :last-of-type，選中同級別中同類型的最後一個標籤
  • :nth-of-type(n)，選中同級別中同類型的第n個標籤
  • :nth-last-of-type(n)，選中同級別中同類型的倒數第n個標籤
  • :only-of-type，選中父元素中唯一型別的某個標籤
  • :not(:nth-of-type(n))，取反操作，除了同級別中同類型的第n個標籤的其餘標籤