課程任務
1. class和id的使用場景？
id: 定義到頁面上唯一的元素，一個頁面上不要出現相同id的兩個元素。
class: 把一些特定的樣式放到一個類中，需要此樣式的標簽，可以添加此類。
2. CSS的選擇器常見的有幾種
基礎選擇器包括：通用元素選擇器，id選擇器，類選擇器，標簽選擇器；組合選擇器；屬性選擇器；偽類選擇器；偽元素選擇器
3. 選擇器的優先級是怎樣的？對于復雜場景如何計算優先級？
- 在屬性后面使用
!important會覆蓋頁面內任何位置定義的元素樣式 - 作為style屬性寫在元素標簽的內聯樣式
- id選擇器
- 類選擇器
- 偽類選擇器
- 屬性選擇器
- 標簽選擇器
- 通配符選擇器
- 瀏覽器自定義
- 繼承
- 行內樣式 ==> a
- id選擇器 ==> b
- 類，屬性選擇器 ==> c
- 標簽選擇器、偽元素 ==> d
| 例子 | a | b | c | d | 權重 |
|---|---|---|---|---|---|
| * | 0 | 0 | 0 | 0 | 0 |
| li | 0 | 0 | 0 | 1 | 1 |
| ul li | 0 | 0 | 0 | 2 | 2 |
| ul ol+li | 0 | 0 | 0 | 3 | 3 |
| li.red.level | 0 | 0 | 2 | 1 | 21 |
| #x3y | 0 | 1 | 0 | 0 | 100 |
| #s12:not(FOO) | 0 | 1 | 0 | 1 | 101 |
比較權重大小，權重越大，優先級越高
4. a:link,a:hover,a:active,a:visited的順序是怎樣的？為什么？
示例
這是一個樣式覆蓋的問題。如上圖，以圖三為例，當a標簽出于hover狀態的時候，它包含hover,visited,link三個狀態，此時要保證hover樣式排在最后，hover狀態才能正常顯示，不會被其他狀態覆蓋。同理，分析其他的三個狀態，最終得出的順序是：a:link,a:visited,a:hover,a:active
5. 以下選擇器分別是什么意思？
#head{
/*id為head的元素*/
}
.head{
/*class包含head的元素*/
}
.header .logo{
/*class包含header的元素后代中包含logo類的元素*/
}
.header.mobile{
/*class即包含header又包含mobile的元素*/
}
.header p, .header h3{
/*class包含header的元素后代中的p標簽和h3標簽*/
}
#header .nav>li{
/*id為header的元素后代中包含nav類元素的所有直接子元素li*/
}
#header a:hover{
/*id為header的元素后代中所有a標簽的hover狀態*/
}
#header .logo~p{
/*id為header的元素后代與包含logo類元素之后的同級p標簽*/
}
#header input[type="text"]{
/*id為header的元素后代中type="text"的input標簽*/
}
列出你知道的偽類選擇器
| 選擇器 | 含義 |
|---|---|
| E:link | 未被點擊的鏈接 |
| E:visited | 已被點擊的鏈接 |
| E:hover | 鼠標懸停其上的E元素 |
| E:active | 鼠標已經按下還未釋放的E元素 |
| E:focus | 獲得當前焦點的E元素 |
| E:first-child | 匹配E的父元素下作為長子的元素E(1.它是E 2.它是它父親的第1個孩子) |
| E:nth-child(n) | 排序為第n個子元素的E元素（1.它是E 2.它是它父親的第n個孩子） |
| E:first-of-type | 匹配父元素下使用同種標簽的第一個子元素(1.它是E 2. 標簽與E相同 3.它是它父親的第1個孩子) |
| E:nth-of-type(n) | 匹配其父元素下使用同種標簽的第n個子元素(1.它是E 2. 標簽與E相同 3.它是它父親的第n個孩子) |
| E:root | 匹配文檔的根元素，對于HTML就是HTML標簽 |
| E:last-child | |
| E:last-of-type |
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-of-type匹配div元素下第一個同類型的子元素
重點在于區分“第一個子元素為div”和“第一個div元素”
運行如下代碼，解析下輸出樣式原因
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.item1:first-child{
color: red;
}
.item1:first-of-type{
background: blue;
}
</style>
</head>
<body>
<div class="ct">
<p class="item1">aa</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
</body>
</html>
.item1:first-child選中.item1父元素的第一子元素；.item1:first-of-type同時選中.item1父標簽下p標簽和h3標簽的第一個元素。
