class 和 id 的使用場景?
id：id選擇器，使用#name定義（name為id名，可任意取名），使用id="name"調用，其優先級高于類選擇器，一個標簽只能有一個id且每個id只能使用一次，多用于頁面分塊的塊級標簽上；
class：類選擇器，使用.name定義（name為類名，可任意取名），使用class="name"調用，一個標簽可以有多個類且同一個類可以用到不同的標簽上，多用于多個標簽樣式相似或完全相同時；
CSS選擇器常見的有幾種?
- 基礎選擇器
- 組合選擇器
- 屬性選擇器
- 偽類選擇器
- 偽元素選擇器
選擇器的優先級是怎樣的?對于復雜場景如何計算優先級？
- 在屬性后面使用 !important 會覆蓋頁面內任何位置定義的元素樣式
- 作為style屬性寫在元素標簽上的內聯樣式
- id選擇器
- 類選擇器
- 偽類選擇器
- 屬性選擇器
- 標簽選擇器
- 通配符選擇器
- 瀏覽器自定義
對于復雜場景，我們通過計算css不同選擇器的個數來計算優先級，可以用一個四位數來表示，其中行內樣式權重最高，行內樣式的個數放在千位上，ID選擇器權重次之，ID選擇器的個數放在百位上，類、屬性選擇器以及偽類選擇器權重相同，低于行內樣式和ID選擇器，所以，這個3個選擇器的個數之和放在十位上，最后，標簽選擇器、偽類選擇器權重最低，個數放在個位上。
for example：
#ct .box p {} 一個ID選擇器，百位是1，一個類選擇器，十位是1，一個標簽選擇，個位是1，所以是0111；
ul ol li.active {} 有一個偽元素選擇器，十位是1，3個標簽選擇器，個位是3，所以是0013；
0111>0013 所以 前者的樣式優先
a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么？
a:link
a:visited
a:hover
a:active
四個都是偽類選擇器，優先級相同；考慮他們會相互覆蓋，所以要按照這個順序
以下選擇器分別是什么意思?
#header{ } ID為header的元素；
.header{ } class為header的元素；
.header .logo{ } class為header元素的后代元素中class為logo的元素；
.header.mobile{ } class既是header又是mobile的元素；
.header p, .header h3{ } class為header元素的后代中的p元素，和 class為header元素的后代中的h3元素
#header .nav>li{ } ID為header元素的的后代中class為nav的直接li子元素
#header a:hover{ } 鼠標懸停的ID為header元素的后代中a元素
#header .logo~p{ } ID為header的元素中的class為logo之后的同級p元素
#header input[type=“text”]{ } ID為header的元素中 所有屬性type值為text的元素
列出你知道的偽類選擇器
E:first-child 匹配元素E的第一個子元素
E:link 匹配所有未被點擊的鏈接
E:visited 匹配所有已被點擊的鏈接
E:active 匹配鼠標已經其上按下、還沒有釋放的E元素
E:hover 匹配鼠標懸停其上的E元素
E:enabled 匹配表單中可用的元素
E:disabled 匹配表單中禁用的元素
E:checked 匹配表單中被選中的radio或checkbox元素
E::selection 匹配用戶當前選中的元素
E:nth-child(n) 匹配其父元素的第n個子元素，第一個編號為1
E:nth-last-child(n) 匹配其父元素的倒數第n個子元素，第一個編號為1
E:nth-of-type(n) 與:nth-child()作用類似，但是僅匹配使用同種標簽的元素
E:nth-last-of-type(n) 與:nth-last-child() 作用類似，但是僅匹配使用同種標簽的元素
E:last-child 匹配父元素的最后一個子元素，等同于:nth-last-child(1)
E:first-of-type 匹配父元素下使用同種標簽的第一個子元素，等同于:nth-of-type(1)
E:last-of-type 匹配父元素下使用同種標簽的最后一個子元素，等同于:nth-last-of-type(1)
E:only-child 匹配父元素下僅有的一個子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type 匹配父元素下使用同種標簽的唯一一個子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:not(selector) 匹配不符合當前選擇器的任何元素
div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和區別
div:first-child 匹配div父元素中第一個子元素；
div :first-child 匹配div元素后代中的第一個子元素；
div:first-of-type匹配父元素下使用相同標簽的第一個子元素；
div :first-of-type匹配div元素后代中第一個使用相同標簽的子元素；
.item1:first-child 匹配class為item1父元素下的第一個子元素，class為item1的p、h3元素的父元素都是div，div的第一個子元素是p，所以p字體顏色變紅；
.item1:first-of-type 匹配父元素下第一個使用同種標簽的子元素，父元素div下有p和h3 兩種標簽，所以p和第一個h3被選中，背景顏色變藍。
