- class 和 id 的使用場景?
- id定位到頁面上唯一的元素，class定位到頁面上某一類的元素。
- CSS選擇器常見的有幾種?
- 基礎(chǔ)選擇器
* 通用元素選擇器，匹配頁面任何元素（這也就決定了我們很少使用）
#id id選擇器编曼，匹配特定id的元素
.class 類選擇器深浮，匹配class包含(不是等于)特定類的元素
element 標(biāo)簽選擇器 - 組合選擇器
E,F 多元素選擇器，用,分隔池充，同時匹配元素E或元素F E F 后代選擇器桩引，用空格分隔，匹配E元素所有的后代（不只是子元素收夸、子元素向下遞歸）元素F E>F 子元素選擇器坑匠，用>分隔，匹配E元素的所有直接子元素 E+F 直接相鄰選擇器卧惜，匹配E元素之后的相鄰的同級元素F E~F 普通相鄰選擇器（弟弟選擇器）厘灼，匹配E元素之后的同級元素F（無論直接相鄰與否） .class1.class2 id和class選擇器和選擇器連寫的時候中間沒有分隔符夹纫，.和 # 本身充當(dāng)分隔符的元素 element#id id和class選擇器和選擇器連寫的時候中間沒有分隔符，.和 #本身充當(dāng)分隔符的元素 - 屬性選擇器
E[attr] 匹配所有具有屬性為attr的元素（div[id]能選擇所有具有id屬性的div） E[attr=value] 匹配所有屬性為value的元素（div[type=text]匹配id=text的div） E[attr~=value] 匹配所有屬性attr具有多個空格分隔设凹，其中一個值等于value的元素 E[attr ^=value] 匹配屬性attr的值以value開頭的元素 E[attr $=value] 匹配屬性attr的值以value結(jié)尾的元素 E[attr *=value] 匹配屬性attr的值包含value的元素 - 偽類選擇器
E:first-child 匹配元素E的第一個子元素 E:last-child 匹配元素e的最后一個子元素 E:nth-child(n) 匹配其父元素的第n個子元素舰讹，第一個編號為1 E:first-of-type 匹配父元素下使用同種標(biāo)簽的第一個子元素，等同于nth-of-type(1) E:hover 匹配鼠標(biāo)懸停智商的e元素 E:focus 匹配獲得焦點的e元素 - 偽元素選擇器
E::first-line 匹配E元素的第一行 E::first-letter 匹配E元素的第一個字母 E::before 在e元素之前插入生成的內(nèi)容 E::after 在e元素之后插入生成的內(nèi)容
- 選擇器的優(yōu)先級是怎樣的?對于復(fù)雜場景如何計算優(yōu)先級闪朱？
1.在屬性后面使用 !important 會覆蓋頁面內(nèi)任何位置定義的元素樣式
2.作為style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式
3.id選擇器
4.類選擇器
5.偽類選擇器
6.屬性選擇器
7.標(biāo)簽選擇器
8.通配符選擇器
9.瀏覽器自定義
- 行內(nèi)樣式 <div style="xxx"></div> ==> a
- ID 選擇器 ==> b
- 類月匣，屬性選擇器和偽類選擇器 ==> c
- 標(biāo)簽選擇器、偽元素 ==> d
計算a监透、b桶错、c、d各自的數(shù)目來確定優(yōu)先級胀蛮。
a:link, a:hover, a:active, a:visited 的順序是怎樣的院刁？ 為什么？
正確順序應(yīng)為：
a：link
a：visited
a:hover
a:active
原因：
1.當(dāng)選擇器優(yōu)先級別相同時粪狼，后定義的會覆蓋先定義的
2.以此類推退腥，當(dāng)鼠標(biāo)經(jīng)過未訪問鏈接，同時有l(wèi)ink和hover屬性再榄，由于后定義的覆蓋先定義的狡刘，所以hover在后面。以此類推困鸥，當(dāng)鼠標(biāo)經(jīng)過已訪問鏈接嗅蔬，同時有visited和hover屬性，由于后定義的覆蓋先定義的疾就，所以hover在link和visited后面澜术。以下選擇器分別是什么意思?
?#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元素鼠標(biāo)移動到上方的情況
?#header .logo~p{ } --- id為header元素的后代元素中class為logo的同級p元素
?#header input[type="text"]{ } --- id為header元素的后代元素中type=“text”的input元素
- 列出你知道的偽類選擇器
同題目2 - div:first-child和div:first-of-type的作用和區(qū)別
前者匹配的是div下的第一個元素，而后者匹配的是div下的第一個div猬腰。 - 運行如下代碼鸟废，解析下輸出樣式的原因。
<style>
.item1:first-child{
color: red;
}
.item1:first-of-type{
background: blue;
}
</style>
<div class="ct">
<p class="item1">aa</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
這里有兩個選擇器姑荷，第一個選擇器是匹配class=“item1”下的第一個元素盒延，所以aa是紅色的，而bb和ccc分別是第二和第三鼠冕，所以不做匹配添寺。第二個選擇器匹配各種類型下的class=“item1”的第一個元素，所以aa和bb是會把背景變成藍色懈费，而ccc由于和bb標(biāo)簽相同畦贸，且是第二個，故不匹配。
