CSS組合選擇器

組合選擇器

羣組（並集）選擇器

• 做用：給全部選擇器選中的標籤設置屬性，能夠同時控制多個選擇器

• 格式：

  選擇器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的標籤

組合選擇器優先級

• 組合選擇器優先級與權值相關，權重爲權值和
• 權值對應關係

選擇器	權值
通配	1
標籤	10
類、屬性	100
id	1000
!important	10000

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

• 不一樣級別的選擇器間不具有可比性：一個類選擇器優先級高於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個標籤的其他標籤