- class 和 id 的使用場景?
class用于主區塊里面的詳細內容，同一個class可以重復出現，一個標簽可以有幾個不同的class。
id多使用于主要塊級元素，id一個頁面中只能出現一次，有些獨一無二元素也可用id。 - CSS選擇器常見的有幾種?
通配符選擇器（＊）
id選擇器（#ID）
類選擇器（.className）
元素選擇器(E)
后代選擇器（Ｅ Ｆ）
子元素選擇器(E>F)
相鄰兄弟元素選擇器(E + F)
群組選擇器（selector1,selector2,...,selectorN）
偽類和偽元素選擇器 - 選擇器的優先級是怎樣的?對于復雜場景如何計算優先級？
!important：在屬性后面使用 !important 會覆蓋頁面內任何位置定義的元素樣式
內聯樣式：style="..."
ID選擇器
類選擇器
偽類選擇器
屬性選擇器
標簽選擇器
通配符選擇器
瀏覽器自定義
對于復雜場景我們可以記住以下三條規則：
- 包含ID的選擇符勝過包含類的選擇符，包含類的選擇符勝過包含標簽名的選擇符。
- 如果幾個不同來源都為同一個標簽的同一個屬性定義了樣式，那么行內樣式勝過嵌入樣式，嵌入樣式勝過鏈接樣式。在鏈接的樣式表中，具有相同特指度的樣式，后生命的勝過先聲明的。
- 設定的樣式勝過繼承的樣式，此時不用考慮特指度（即顯式設定優先）。
a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么？
順序是link hover active visited
鼠標經過的“未訪問鏈接”同時擁有a:link、a:hover兩種屬性，后面的屬性會覆蓋前面的屬性定義；
鼠標經過的“已訪問鏈接”同時擁有a:visited、a:hover兩種屬性，后面的屬性會覆蓋前面的屬性定義；
所以說，a:hover定義一定要放在a:link、a:visited的后面,以下選擇器是什么意思？
- #header{
}
選中id="header"的元素 - .header{
}
選中class="header"的元素 - .header .logo{
}
選中class屬性為header的父元素的擁有class為logo的子元素 - .header.mobile{
}
匹配類名包含header和mobile的元素，如class = 'beader mobile' - .header p, .header h3{
}
匹配有header類型父元素的P元素和有header類型父元素的h3元素 - #header .nav>li{
}
匹配id為header的后代中，類名為nav的直接子元素中的li標簽、、- - #header a:hover{
}
匹配id為header的后代中處在hover狀態下的a標簽 - #header .logo~p{
}
匹配id為header的后代中類名為logo的元素的一般相鄰同胞元素P - #header input[type="text"]{
}
匹配id為header的后代中屬性值type=text的input元素
列出你知道的偽類選擇器
a:link 向未被訪問的鏈接添加樣式
a:visited 向已被訪問的鏈接添加樣式
a:hover 當鼠標懸浮在元素上方時，向元素添加樣式
a:active 向被激活的元素添加樣式
E:first-child：匹配元素E的第一個子元素
E:nth-child：匹配元素E的第n個子元素
E:enabled和E:disabled：匹配元素E的狀態為可用/不可用
E:checked和E:selection：匹配元素E的狀態為單選框選中/復選框選中-
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的第一個子元素
div :first-of-type： 所匹配的元素，其父元素為div，該元素為div的子元素中某一類元素的第一個元素
8.運行如下代碼，解析下輸出樣式的原因。
image.png
.item1:first-child 選中的是class 為item1的是某個父元素的第一個子元素的標簽，在代碼中就是<p>，因為p標簽是div的第一個子元素。
.item2:first-of-type 選中的是class 為item1的且是某個父元素同一種類型標簽的第一個，那么p 和第一個h3標簽都符合這一條，所以北京都成為藍色。
