class 和 id 的使用場景
id定位到頁面上唯一元素，而class定位到某一類元素。
CSS選擇器種類
（1）基礎選擇器
* 通用選擇器，匹配頁面任何元素（這便決定了它很少被使用）
#id id選擇器，匹配特定id的元素
.class 類選擇器，匹配class特定類的元素
element標簽選擇器
（2）組合選擇器
E，F(xiàn) 多元素選擇器，用，分隔，同時匹配元素E和元素F
E F后代選擇器，用空格分隔，匹配E元素所有的后代
E>F子元素選擇器，用>分隔，匹配E元素所有的直接元素（注意此處選擇是第一層級的，而嵌套的不會被選擇）
E~F普通相鄰選擇器，匹配E元素之后的所有同級元素
E+F直接相鄰選擇器，匹配E元素之后的相鄰同級元素F
.class1.class2表示既..又..（注意中間沒有分隔符）
element#id用的不多#id本身就可以選擇
（3）屬性選擇器
E[attr] 匹配所有具有屬性attr的元素
E[attr=value]匹配所有屬性為value的元素
E[attr~=value]匹配所有屬性attr，具有多個空格分隔，其中一個值等于 value的元素。
E[attr^=value]匹配屬性attr的值以value開頭的元素
E[attr$=value]匹配屬性attr的值以value結尾的元素
E[attr*=value]匹配屬性attr的值包含value的元素
（4）偽類選擇器
E:first-child 匹配作為長子的元素E
E:link 匹配所有未被點擊的鏈接
E:visited 匹配所有已被點擊的鏈接
E:active匹配鼠標已經(jīng)按下但沒有釋放的元素
E:hover 匹配鼠標懸停其上的元素
E:focus 匹配獲得當前焦點的元素
E:long(c)匹配long屬性=c的元素
E:enabled 匹配表單中可用的元素
E:disabled 匹配表單中禁用的元素
E:checked 匹配表單中被選中的radio或checkbox元素
E:selection 匹配用戶當前選中的元素
E:root 匹配文檔的根元素，對于HTML文檔，就是HTML元素
E:nth-child(n) 匹配其父元素的第n個子元素，第一個編號為1
E:nth-of-type(n) 與nth-child(n)作用類似，但是僅匹配使用同種標簽的元素
（5）偽元素選擇器
E::first-line 匹配E元內容的第一行
E::first-letter 匹配E元素內容的第一個字母
E::before 在E元素之前插入生成的內容
E::after 在E元素之后插入生成的內容
- 選擇器優(yōu)先級；復雜場景如何計算優(yōu)先級
（1）優(yōu)先級（高到低）
1.在屬性后面使用！important 會覆蓋頁面內任何位置定義的元素樣式
2.作為style屬性寫在元素標簽的內聯(lián)樣式
3.id選擇器
4.類選擇器
5.偽類選擇器
6.屬性選擇器
7.標簽選擇器
8.通配符選擇器
9.瀏覽器自定義
（2）復雜場景如何計算優(yōu)先級：作如下歸類：a=行內樣式<div style="xxx"></div>；b=id選擇器；c=類、屬性和偽類選擇器；d=標簽、偽元素選擇器；通過計算和比較大小來定奪誰優(yōu)先，a大則最優(yōu)先，a相等則比較b，以此類推。
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標簽和h3標簽
#header .nav>li{ } id為header的class為nav元素的直接子元素為li的標簽
#header a:hover{ } id為header元素中的a標簽的hover狀態(tài)
#header .logo~p{ } id為header下 class為logo標簽之后所有的p標簽
#header input[type=“text”]{ } id為header的后代中，input標簽中，屬性type的值為"text"的元素集合
div :first-child和div :first-of-type的作用和區(qū)別
first-child 匹配其父元素的第一個子元素
first-of-type 匹配其父元素下使用同種標簽的第一個元素
div :first-child:匹配div下的第一個子元素
div :first-of-type:匹配div下同種類型第一個，得到可能不止一個
【 ！需要注意：加個空格會變成組合選擇器，而這兩個的區(qū)別同上兩個一樣，所匹配的目標不一樣】
