class 和 id 的使用場景
id定位到頁面上唯一元素父晶，而class定位到某一類元素哮缺。
CSS選擇器種類
（1）基礎(chǔ)選擇器
* 通用選擇器，匹配頁面任何元素（這便決定了它很少被使用）
#id id選擇器甲喝，匹配特定id的元素
.class 類選擇器尝苇，匹配class特定類的元素
element標(biāo)簽選擇器
（2）組合選擇器
E，F(xiàn) 多元素選擇器埠胖，用糠溜，分隔，同時(shí)匹配元素E和元素F
E F后代選擇器直撤，用空格分隔非竿，匹配E元素所有的后代
E>F子元素選擇器，用>分隔谋竖，匹配E元素所有的直接元素（注意此處選擇是第一層級的红柱，而嵌套的不會(huì)被選擇）
E~F普通相鄰選擇器，匹配E元素之后的所有同級元素
E+F直接相鄰選擇器蓖乘，匹配E元素之后的相鄰?fù)壴谾
.class1.class2表示既..又..（注意中間沒有分隔符）
element#id用的不多#id本身就可以選擇
（3）屬性選擇器
E[attr] 匹配所有具有屬性attr的元素
E[attr=value]匹配所有屬性為value的元素
E[attr~=value]匹配所有屬性attr锤悄，具有多個(gè)空格分隔，其中一個(gè)值等于 value的元素驱敲。
E[attr^=value]匹配屬性attr的值以value開頭的元素
E[attr$=value]匹配屬性attr的值以value結(jié)尾的元素
E[attr*=value]匹配屬性attr的值包含value的元素
（4）偽類選擇器
E:first-child 匹配作為長子的元素E
E:link 匹配所有未被點(diǎn)擊的鏈接
E:visited 匹配所有已被點(diǎn)擊的鏈接
E:active匹配鼠標(biāo)已經(jīng)按下但沒有釋放的元素
E:hover 匹配鼠標(biāo)懸停其上的元素
E:focus 匹配獲得當(dāng)前焦點(diǎn)的元素
E:long(c)匹配long屬性=c的元素
E:enabled 匹配表單中可用的元素
E:disabled 匹配表單中禁用的元素
E:checked 匹配表單中被選中的radio或checkbox元素
E:selection 匹配用戶當(dāng)前選中的元素
E:root 匹配文檔的根元素铁蹈，對于HTML文檔，就是HTML元素
E:nth-child(n) 匹配其父元素的第n個(gè)子元素众眨，第一個(gè)編號(hào)為1
E:nth-of-type(n) 與nth-child(n)作用類似握牧，但是僅匹配使用同種標(biāo)簽的元素
（5）偽元素選擇器
E::first-line 匹配E元內(nèi)容的第一行
E::first-letter 匹配E元素內(nèi)容的第一個(gè)字母
E::before 在E元素之前插入生成的內(nèi)容
E::after 在E元素之后插入生成的內(nèi)容
- 選擇器優(yōu)先級；復(fù)雜場景如何計(jì)算優(yōu)先級
（1）優(yōu)先級（高到低）
1.在屬性后面使用娩梨！important 會(huì)覆蓋頁面內(nèi)任何位置定義的元素樣式
2.作為style屬性寫在元素標(biāo)簽的內(nèi)聯(lián)樣式
3.id選擇器
4.類選擇器
5.偽類選擇器
6.屬性選擇器
7.標(biāo)簽選擇器
8.通配符選擇器
9.瀏覽器自定義
（2）復(fù)雜場景如何計(jì)算優(yōu)先級：作如下歸類：a=行內(nèi)樣式<div style="xxx"></div>沿腰；b=id選擇器；c=類狈定、屬性和偽類選擇器颂龙；d=標(biāo)簽习蓬、偽元素選擇器；通過計(jì)算和比較大小來定奪誰優(yōu)先措嵌，a大則最優(yōu)先躲叼，a相等則比較b，以此類推企巢。
a:link, a:hover, a:active, a:visited 的順序及原因
四個(gè)偽類選擇器定義了"鏈接枫慷、已訪問過的鏈接、鼠標(biāo)停在上方時(shí)浪规、點(diǎn)下鼠標(biāo)時(shí)"的樣式或听，正確使用順序?yàn)椋篴:link a:visited a:hover a:active 存在覆蓋問題故要嚴(yán)格遵照這個(gè)順序進(jìn)行。
以下選擇器含義
#header{ } id為header的元素
.header{ } class為header的元素
.header .logo{ } class為header 子元素中 class為logo的元素
.header.mobile{ } class同時(shí)包含header和mobile的元素
.header p, .header h3{ } class為header元素中的p標(biāo)簽和h3標(biāo)簽
#header .nav>li{ } id為header的class為nav元素的直接子元素為li的標(biāo)簽
#header a:hover{ } id為header元素中的a標(biāo)簽的hover狀態(tài)
#header .logo~p{ } id為header下 class為logo標(biāo)簽之后所有的p標(biāo)簽
#header input[type=“text”]{ } id為header的后代中笋婿，input標(biāo)簽中誉裆，屬性type的值為"text"的元素集合
div :first-child和div :first-of-type的作用和區(qū)別
first-child 匹配其父元素的第一個(gè)子元素
first-of-type 匹配其父元素下使用同種標(biāo)簽的第一個(gè)元素
div :first-child:匹配div下的第一個(gè)子元素
div :first-of-type:匹配div下同種類型第一個(gè)，得到可能不止一個(gè)
【 缸濒！需要注意：加個(gè)空格會(huì)變成組合選擇器足丢，而這兩個(gè)的區(qū)別同上兩個(gè)一樣，所匹配的目標(biāo)不一樣】
