選擇器的規則結構

圖片.png

class 和 id 的使用場景?

• 在HTML文檔中可以為多個元素進行指定相同的class屬性值；(為多個需要同時修改樣式的元素設定相同class值，使之使用同一個類選擇器)
• 但在HTML文檔中不能存在多個id屬性值相同的元素；（為某個特定的元素聲明獨立的id選擇器）

CSS選擇器常見的有幾種?

• 基礎選擇器
• 類選擇器 .class
• id選擇器 #id
• 標簽選擇器 p
• 通用選擇器 *
• 屬性選擇器 E[attr]
• 組合選擇器
• 多元素選擇器 E,F
• 后代選擇器 E F
• 子選擇器 E>F
• 直接相鄰祖選擇器 E+F,匹配E元素之后的相鄰的同級元素F
• 普通相鄰選擇器 E~F,匹配E元素之后的同級元素F（無論直接相鄰與否）
• .class1.class2 id和class選擇器和選擇器連寫的時候中間沒有分隔符，. 和 # 本身充當分隔符的元素
• element#id id和class選擇器和選擇器連寫的時候中間沒有分隔符，. 和 # 本身充當分隔符的元素
• 偽類選擇器
• 偽元素選擇器

選擇器的優先級是怎樣的?對于復雜場景如何計算優先級？

選擇器的優先級是由它們各自的特殊性決定，特殊性值表述為四個部分，如0,0,0,0

• 對于選擇器給定的各個id屬性值，加0,1,0,0
• 對于選擇器給定的各個類屬性值、屬性選擇或偽類，加0,0,1,0
• 對于選擇器給定的各個元素和偽類元素，加0,0,0,1
• 對于內聯聲明的特殊性，為1,0,0,0
• 對于標志為！important的聲明，會覆蓋頁面任何位置定義的元素樣式！important總是放在聲明的最后，如果放在聲明的其它位置，整個聲明會失效。
  ！important > style屬性的內聯樣式 > id選擇器 > 類選擇器 > 偽類選擇器 > 屬性選擇器 > 標簽選擇器 > 通配符選擇器 > 瀏覽器自定義

a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么？

按照link-visited-hover-active的順序聲明，因為它們擁有相同的權重、來源和特殊性，因此與元素匹配的最后一個選擇器樣式覆蓋，以這種順序聲明是合理的。
復雜情況下根據選擇器的特殊性對權值進行計算，最后采用權值大的樣式

以下選擇器分別是什么意思?

• header{

} 元素id值為header的選擇器

• .header{
  } 元素class值為header的選擇器
• .header .logo{
  } 匹配class為header的元素所有的后代 為class值為logo元素的選擇器
• .header.mobile{
  } 匹配元素同時滿足class值既為header也為mobile的選擇器
• .header p, .header h3{
  } 同時匹配元素class值為header的后代 p標簽選擇器和h3標簽的選擇器

• header .nav>li{

} 匹配元素id值為header的后代 元素class值為nav的直接子元素（li）的選擇器

• header a:hover{

} 匹配元素id值為header的后代 為a:hover的選擇器

• header .logo~p{

} 匹配元素id值為header的后代中元素class值為logo之后的同級相鄰p標簽（無論是否直接相鄰）的選擇器

• header input[type="text"]{

} 匹配元素id值為header的后代中為input標簽且屬性type為text的選擇器

我所知道的偽類選擇器

• E:first-child 匹配作為長子（第一個子女）的元素E
• E:link 匹配所有未被點擊的鏈接
• E:visited 匹配所有已被點擊的鏈接
• E:active 匹配鼠標已經其上按下、還沒有釋放的E元素
• E:hover 匹配鼠標懸停其上的E元素
• E:focus 匹配獲得當前焦點的E元素
• E:lang(c) 匹配lang屬性等于c的E元素
• E:enabled 匹配表單中可用的元素
• E:disabled 匹配表單中禁用的元素
• E:checked 匹配表單中被選中的radio或checkbox元素
• E::selection 匹配用戶當前選中的元素

div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和區別 （注意空格的作用）

• div:first-child 匹配符合div選擇器，而且必須是其父元素的第一個子節點元素
• div:first-of-type 匹配符合div選擇器，而且是與其它同類型、同級的兄弟元素中的第一個元素
• div :first-child 匹配div選擇器下第一個子節點元素
• div :first-type-of 匹配div選擇器下同種類型、同級兄弟元素中的第一個元素

運行如下代碼，解析下輸出樣式的原因

圖片.png

圖片.png

.item1:first-child{ color: red; }因為p標簽的class值為item1，且作為其父元素下第一個子節點元素，所以被匹配到字體顏色變為紅色；
.item1:first-of-type{ background: biue; }因為p標簽class值為item1，且作為其父元素下相同類型的第一個子節點元素，所以被匹配到背景為藍色；最后兩行的h3標簽class值都為item1，但作為相同類型的子節點元素，在該選擇器下，只匹配到第一個元素為藍色背景；