- class 和 id 的使用場景?
class用于主區(qū)塊里面的詳細內(nèi)容梆靖，同一個class可以重復出現(xiàn)，一個標簽可以有幾個不同的class笔诵。
id多使用于主要塊級元素返吻，id一個頁面中只能出現(xiàn)一次，有些獨一無二元素也可用id乎婿。 - CSS選擇器常見的有幾種?
通配符選擇器（＊）
id選擇器（#ID）
類選擇器（.className）
元素選擇器(E)
后代選擇器（Ｅ Ｆ）
子元素選擇器(E>F)
相鄰兄弟元素選擇器(E + F)
群組選擇器（selector1,selector2,...,selectorN）
偽類和偽元素選擇器 - 選擇器的優(yōu)先級是怎樣的?對于復雜場景如何計算優(yōu)先級测僵？
!important：在屬性后面使用 !important 會覆蓋頁面內(nèi)任何位置定義的元素樣式
內(nèi)聯(lián)樣式：style="..."
ID選擇器
類選擇器
偽類選擇器
屬性選擇器
標簽選擇器
通配符選擇器
瀏覽器自定義
對于復雜場景我們可以記住以下三條規(guī)則：
- 包含ID的選擇符勝過包含類的選擇符，包含類的選擇符勝過包含標簽名的選擇符谢翎。
- 如果幾個不同來源都為同一個標簽的同一個屬性定義了樣式捍靠，那么行內(nèi)樣式勝過嵌入樣式，嵌入樣式勝過鏈接樣式森逮。在鏈接的樣式表中榨婆，具有相同特指度的樣式，后生命的勝過先聲明的褒侧。
- 設定的樣式勝過繼承的樣式良风，此時不用考慮特指度（即顯式設定優(yōu)先）。
a:link, a:hover, a:active, a:visited 的順序是怎樣的闷供？ 為什么烟央？
順序是link hover active visited
鼠標經(jīng)過的“未訪問鏈接”同時擁有a:link这吻、a:hover兩種屬性吊档，后面的屬性會覆蓋前面的屬性定義唾糯；
鼠標經(jīng)過的“已訪問鏈接”同時擁有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狀態(tài)下的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的狀態(tài)為可用/不可用
E:checked和E:selection：匹配元素E的狀態(tài)為單選框選中/復選框選中-
div:first-child、div:first-of-type扣囊、div :first-child和div :first-of-type的作用和區(qū)別 （注意空格的作用）
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標簽都符合這一條蕊爵，所以北京都成為藍色。
