1.class 和 id 的使用場景?
class使用場景：CSS操作，把一些特定樣式放到一個class類中，需要此樣式的標簽，可以在添加此類。
id使用場景：根據提供的唯一id號，快速獲取標簽對象；用于充當label標簽for屬性的值：示例：<label for='userid'>用戶名：</label>，表示單擊此label標簽時，id為userid的標簽獲得焦點。
2.CSS選擇器常見的有幾種?
1.基礎選擇器
| 選擇器 | 作用 |
|---|---|
| * | 通用，匹配所有元素 |
| #id | id選擇器，匹配特定ID的元素 |
| .class | 類選擇器，匹配特定類名的元素 |
| element | 標簽選擇器 |
2.組合選擇器
| 選擇器 | 作用 |
|---|---|
| E，F | "，"分隔， 同時匹配E和F |
| E F | 空格分隔，匹配E元素所有后代 |
| E>F | >分隔，匹配E元素子元素 |
| E+F | 匹配E元素之后的相鄰同級F元素 |
| E~F | 匹配E元素之后的所有同級F元素 |
| .class1.class2 | id和class選擇器和選擇器連寫時中間沒有連接符 |
3.偽類選擇器
| 選擇器 | 作用 |
|---|---|
| E:first-child | 匹配E元素的第一個子元素 |
| E:link | 匹配所有未被點擊的鏈接 |
| E:visited | 匹配已被點擊的鏈接 |
| E:active | 匹配鼠標已經按下還沒有釋放的E元素 |
| E:hover | 匹配鼠標懸浮其上的元素 |
| E:foucs | 匹配獲得當前焦點的E元素 |
| 注意順序：順序l-v-h-a | |
| E:lang(c) | 匹配lang屬性等于c的E元素 |
| E:enabled | 匹配表單中可用元素 |
| E:disabled | 匹配表單中禁用元素 |
| E:checked | 匹配表單中被選中的radio或checked元素 |
| E:selection | 匹配用戶當前選中元素 |
| E:nth-child(n) | 匹配其父元素下的第n個子元素，第一個為1 |
| E:nth-last-child(n) | 匹配其父元素下的倒數第n個子元素，第一個為1 |
| E:nth-of-type(n) | 匹配使用同種標簽的元素 |
| E:first-child | 匹配父元素的第一個子元素 |
| E:last-child | 匹配父元素的最后一個子元素 |
4.偽元素選擇器
| 選擇器 | 作用 |
|---|---|
| E:before | 在E元素之前插入生成的內容 |
| E:after | 在E 元素之后插入生成內容 |
5.屬性選擇器
| 選擇器 | 作用 |
|---|---|
| E[attr] | 匹配所有具有屬性attr的元素，div[id]就能取到所有有id屬性的div |
| E[attr = value] | 匹配屬性attr值為value的元素，div[id=test],匹配id=test的div |
| E[attr ~= value] | 匹配所有屬性attr具有多個空格分隔、其中一個值等于value的元素 |
| E[attr ^= value] | 匹配屬性attr的值以value開頭的元素 |
| E[attr $= value] | 匹配屬性attr的值以value結尾的元素 |
| E[attr *= value] | 匹配屬性attr的值包含value的元素 |
3.選擇器的優先級是怎樣的?對于復雜場景如何計算優先級？
1.屬性后面使用！important會覆蓋任何位置定義的元素樣式
2.style屬性寫在元素標簽上的內聯樣式
3.id選擇器
4.類選擇器
5.偽類選擇器
6.屬性選擇器
7.標簽選擇器
8.通配選擇器
9.瀏覽器自定義
復雜場景：
行內樣式多的優先，其次是ID選擇器，再是類、屬性、偽類選擇器，最后是標簽元素、偽元素選擇器
4.a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么？
順序 a:link>a:visited>a:hover>a:active；
鼠標經過未訪問連接同時擁有a:link和a:hover屬性，后面的屬性會覆蓋前面的屬性定義。
鼠標經過已訪問連接同時擁有a:visited和a:hover屬性，后面的屬性會覆蓋前面的屬性定義。
hover和active放在link和visited之后，active放在hover之后。
5.以下選擇器分別是什么意思?
#header{} 匹配id為header的元素
.header{} 匹配類名為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元素的后代中type=text的input元素
列出你知道的偽類選擇器
| 選擇器 | 作用 |
|---|---|
| E:first-child | 匹配E元素的第一個子元素 |
| E:link | 匹配所有未被點擊的鏈接 |
| E:visited | 匹配已被點擊的鏈接 |
| E:active | 匹配鼠標已經按下還沒有釋放的E元素 |
| E:hover | 匹配鼠標懸浮其上的元素 |
| E:foucs | 匹配獲得當前焦點的E元素 |
| E:lang(c) | 匹配lang屬性等于c的E元素 |
| E:enabled | 匹配表單中可用元素 |
| E:disabled | 匹配表單中禁用元素 |
| E:checked | 匹配表單中被選中的radio或checked元素 |
| E:selection | 匹配用戶當前選中元素 |
| E:nth-child(n) | 匹配其父元素下的第n個子元素，第一個為1 |
| E:nth-last-child(n) | 匹配其父元素下的倒數第n個子元素，第一個為1 |
| E:nth-of-type(n) | 匹配使用同種標簽的元素 |
| E:first-child | 匹配父元素的第一個子元素 |
| E:last-child | 匹配父元素的最后一個子元素 |
div:first-child和div:first-of-type的作用和區別
- div:first-child:匹配div元素的第一個子元素
- div:first-of-type:匹配父元素的首個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>
Paste_Image.png
- .item1:first-child：選取class為item1的父元素下的第一個子元素，所以aa字體為紅色。
- .item1:first-of-type：選取class為item1的父元素下使用同種標簽的第一個子元素，所以aa和bb的背景為藍色。
