1. class 和 id 的使用場(chǎng)景：
- id：id選擇器，使用#name定義（name為id名，可任意取名），使用id="name"調(diào)用钓丰，其優(yōu)先級(jí)高于類選擇器，一個(gè)標(biāo)簽只能有一個(gè)id且每個(gè)id只能使用一次每币，多用于頁面分塊的塊級(jí)標(biāo)簽上斑粱；
- class：類選擇器，使用.name定義（name為類名脯爪，可任意取名）则北，使用class="name"調(diào)用，一個(gè)標(biāo)簽可以有多個(gè)類且同一個(gè)類可以用到不同的標(biāo)簽上痕慢，多用于多個(gè)標(biāo)簽樣式相似或完全相同時(shí)尚揣。
2. CSS常見選擇器：
- 基礎(chǔ)選擇器
- * : 通用元素選擇器，匹配頁面任何元素（這也就決定了我們很少使用）
- #id : id選擇器掖举，匹配特定id的元素
- .class: 類選擇器快骗，匹配class包含(不是等于)特定類的元素
- element: 標(biāo)簽選擇器
- 組合選擇器
- E,F 多元素選擇器，用,分隔塔次，同時(shí)匹配元素E或元素F
- E F 后代選擇器方篮，用空格分隔，匹配E元素所有的后代（不只是子元素励负、子元素向下遞歸）元素F
- E>F 子元素選擇器藕溅，用>分隔，匹配E元素的所有直接子元素
- E+F 直接相鄰選擇器继榆，匹配E元素之后的相鄰的同級(jí)元素F
- E~F 普通相鄰選擇器（弟弟選擇器）巾表，匹配E元素之后的同級(jí)元素F（無論直接相鄰與否）
- .class1.class2 id和class選擇器和選擇器連寫的時(shí)候中間沒有分隔符，.和 # 本身充當(dāng)分隔符的元素
- element#id id和class選擇器和選擇器連寫的時(shí)候中間沒有分隔符略吨，.和 #本身充當(dāng)分隔符的元素
- 屬性選擇器
- E[attr] 匹配所有具有屬性為attr的元素（div[id]能選擇所有具有id屬性的div）
- E[attr=value] 匹配所有屬性為value的元素（div[type=text]匹配id=text的div）
- E[attr~=value] 匹配所有屬性attr具有多個(gè)空格分隔集币，其中一個(gè)值等于value的元素
- E[attr ^=value] 匹配屬性attr的值以value開頭的元素
- E[attr $=value] 匹配屬性attr的值以value結(jié)尾的元素
- E[attr *=value] 匹配屬性attr的值包含value的元素
- *偽類選擇器
- E:first-child 匹配元素E的第一個(gè)子元素
- E:last-child 匹配元素e的最后一個(gè)子元素
- E:nth-child(n) 匹配其父元素的第n個(gè)子元素，第一個(gè)編號(hào)為1
- E:first-of-type 匹配父元素下使用同種標(biāo)簽的第一個(gè)子元素翠忠，等同于nth-of-type(1)
- E:hover 匹配鼠標(biāo)懸停的e元素
- E:focus 匹配獲得焦點(diǎn)的e元素
- 偽元素選擇器
- E::first-line 匹配E元素的第一行
- E::first-letter 匹配E元素的第一個(gè)字母
- E::before 在e元素之前插入生成的內(nèi)容
- E::after 在e元素之后插入生成的內(nèi)容
3. 選擇器的優(yōu)先級(jí)及計(jì)算：
- 屬性后+!important：p {color:#ccc!important;}
- 內(nèi)聯(lián)樣式：
- id選擇器： #id
- 類選擇器： .class
- 偽類選擇器：a:link
- 屬性選擇器：h1{}
- 標(biāo)簽選擇器：p[XXX]
- 通用選擇器：*
- 瀏覽器自定義
復(fù)雜場(chǎng)景時(shí)鞠苟，計(jì)算優(yōu)先級(jí)時(shí)通過數(shù)標(biāo)簽來計(jì)算，先數(shù)id秽之，如果id相等再數(shù)類当娱，如果id不相等，id多的選擇器權(quán)重高政溃，權(quán)重越高趾访，優(yōu)先級(jí)越高态秧。如果id選擇器數(shù)量相同董虱，再數(shù)類選擇器，最后數(shù)標(biāo)簽。
權(quán)重計(jì)算規(guī)則：
- 第一等：代表內(nèi)聯(lián)樣式愤诱，如: style=" "云头，權(quán)值為1000。
- 第二等：代表ID選擇器淫半，如：#content溃槐，權(quán)值為0100。
- 第三等：代表類科吭，偽類和屬性選擇器昏滴，如.content，權(quán)值為0010对人。
- 第四等：代表類型選擇器和偽元素選擇器谣殊，如div p，權(quán)值為0001牺弄。
- 通配符姻几、子選擇器、相鄰選擇器等的势告。如*蛇捌、>、+,權(quán)值為0000咱台。
- 繼承的樣式?jīng)]有權(quán)值络拌。
!important 的作用是提升優(yōu)先級(jí)，換句話說回溺。加了這句的樣式的優(yōu)先級(jí)是最高的（比內(nèi)聯(lián)樣式的優(yōu)先級(jí)還高)盒音。
比較規(guī)則：
- 1,0,0,0 > 0,99,99,99。也就是說從左往右逐個(gè)等級(jí)比較馅而，前一等級(jí)相等才往后比祥诽。
- 無論是行間、內(nèi)部和外部樣式瓮恭，都是按照這個(gè)規(guī)則來進(jìn)行比較雄坪。而不是直觀的行間>內(nèi)部>外部樣式；ID>class>元素屯蹦。之所以有這樣的錯(cuò)覺维哈，是因?yàn)榇_實(shí)行間為第一等的權(quán)重，所以它的權(quán)重是最高的登澜。而內(nèi)部樣式可能一般寫在了外部樣式引用了之后阔挠，所以覆蓋掉了之前的。
- 在權(quán)重相同的情況下脑蠕，后面的樣式會(huì)覆蓋掉前面的樣式购撼。
- 通配符跪削、子選擇器、相鄰選擇器等的迂求。雖然權(quán)值為0000碾盐，但是也比繼承的樣式優(yōu)先。
實(shí)例：
a{color: yellow;} /*特殊性值：0,0,0,1*/
div a{color: green;} /*特殊性值：0,0,0,2*/
.demo a{color: black;} /*特殊性值：0,0,1,1*/
.demo input[type="text"]{color: blue;} /*特殊性值：0,0,2,1*/
.demo *[type="text"]{color: grey;} /*特殊性值：0,0,2,0*/
#demo a{color: orange;} /*特殊性值：0,1,0,1*/
div#demo a{color: red;} /*特殊性值：0,1,0,2*/
<a href="">第一條應(yīng)該是黃色</a> <!--適用第1行規(guī)則-->
<div class="demo">
<input type="text" value="第二條應(yīng)該是藍(lán)色" /><!--適用第4揩局、5行規(guī)則毫玖，第4行優(yōu)先級(jí)高-->
<a href="">第三條應(yīng)該是黑色</a><!--適用第2、3行規(guī)則凌盯，第3行優(yōu)先級(jí)高-->
</div>
<div id="demo">
<a href="">第四條應(yīng)該是紅色</a><!--適用第5付枫、6行規(guī)則，第6行優(yōu)先級(jí)高-->
</div>
4. a:link, a:hover, a:active, a:visited 意義及順序：
- a偽類解釋：
- link：設(shè)置a對(duì)象在未被訪問前的CSS樣式驰怎；
- visited：設(shè)置a對(duì)象在其鏈接地址已被訪問過時(shí)的CSS樣式励背；
- hover：設(shè)置對(duì)象在其鼠標(biāo)懸停時(shí)的CSS樣式；
- active：設(shè)置對(duì)象在被用戶激活（在鼠標(biāo)點(diǎn)擊與釋放之間發(fā)生的事件）時(shí)的CSS樣式砸西；
- focus : 代表的是獲取焦點(diǎn)時(shí)的樣式叶眉，這個(gè)我們可以通過tab鍵來查看，一旦鏈接獲取了焦點(diǎn)芹枷，則它的樣式就是你設(shè)置的focus樣式衅疙。
-
順序：
a偽類的順序?yàn)椋篴:link > a:visited > a:focus >a:hover > a:active。
前四個(gè)的順序有個(gè)比較簡(jiǎn)便的記憶方法：L-V-H-A鸳慈，即love & hate饱溢。 - 原因：
- 鼠標(biāo)經(jīng)過的“未訪問鏈接”同時(shí)擁有a:link、a:hover兩種屬性走芋，后面的屬性會(huì)覆蓋前面的屬性定義绩郎；
- 鼠標(biāo)經(jīng)過的“已訪問鏈接”同時(shí)擁有a:visited、a:hover兩種屬性翁逞，后面的屬性會(huì)覆蓋前面的屬性定義肋杖；
- a:active是鼠標(biāo)點(diǎn)擊與釋放之間發(fā)生的事件，并擁有鼠標(biāo)懸停a:hover屬性挖函；
由于偽類的選擇器優(yōu)先級(jí)一致状植，后面的a鏈接樣式會(huì)覆蓋前面的。
所以說怨喘，a:hover定義一定要放在a:link津畸、a:visited的后面，才能在鼠標(biāo)懸停時(shí)必怜，a:hover樣式不被a:link和a:visited樣式覆蓋肉拓；
- a:visited一定要放在a:link的后面，因?yàn)檫@樣能保證訪問過的鏈接具有a:visited樣式梳庆，并能覆蓋a:link默認(rèn)樣式暖途；
- a:active一定要放在a:hover后面卑惜。假如a:active放在a:hover前面，由于a:active擁有鼠標(biāo)懸停a:hover屬性丧肴，當(dāng)鼠標(biāo)按下時(shí)残揉，首先會(huì)觸發(fā)a:hover事件胧后，然后觸發(fā)
- a:active芋浮，但是a:ctive已被a:hover的樣式所覆蓋，因此無法看到a:active的樣式壳快。所以纸巷，a:active一定要放在a:hover后面。
- 補(bǔ)充a:focus的順序：
- :hover 代表的是你光標(biāo)經(jīng)過某一元素時(shí)的樣式眶痰，如果將此樣式放在:focus之后瘤旨，則當(dāng)鏈接獲取焦點(diǎn)時(shí)，顯示:focus樣式竖伯，當(dāng)光標(biāo)經(jīng)過此鏈接時(shí)存哲，會(huì)顯示hover的樣式，因?yàn)閔over排在后七婴，會(huì)覆蓋focus樣式祟偷。
- 如果:hover排在前，:focus排在后打厘，則當(dāng)光標(biāo)獲得焦點(diǎn)時(shí)顯示:focus的樣式修肠，但當(dāng)光標(biāo)經(jīng)過鏈接時(shí)，樣式并未顯示:hover的樣式户盯，而是繼續(xù)是:focus的樣式嵌施，因?yàn)閼?yīng)用的focus樣式在hover之后，覆蓋了前面的樣式莽鸭。
可用以下代碼進(jìn)行具體演示
a:focus{
color:black;
text-decoration:underline;
}
a:hover{
color:#FF0000;
text-decoration:underline;
}
a:active{
color:#FFCC00;
}
綜上所述吗伤，a偽類的順序?yàn)椋篴:link > a:visited > a:focus > a:hover > a:active。
5. 選擇器舉例：
/*id選擇器硫眨，匹配id值為header的元素*/
#header{
}
/*class選擇器牲芋，匹配class值為header的所有元素*/
.header{
}
/*后代選擇器，匹配class值為header元素的所有class值為logo的后代*/
.header .logo{
}
/*匹配class值包含header和mobile的元素 */
.header.mobile{
}
/*匹配class值為header元素后代中的p和h3元素*/
.header p, .header h3{
}
/*匹配id值為header元素后代中class值為nav元素中的li元素*/
#header .nav>li{
}
/*為id值為header元素后代中的a元素指定鼠標(biāo)移動(dòng)到其上方的樣式 */
#header a:hover{
}
/*在id值為header的元素后代中尋找：class值為logo元素之后的同級(jí)p元素*/
#header .logo~p{
}
/*在id值為header的元素后代中尋找type屬性為”text"的input元素*/
#header input[type="text"]{
}
6. div:first-child和div:first-of-type的作用和區(qū)別
div:first-child 匹配的是 div 的父元素下第一個(gè)子元素捺球，而 div:first-of-type
匹配的是父元素下同種元素類型的第一個(gè)子元素缸浦。例如：
<div class="father">
<h1 id="child1">AA</h1>
<h2 id="child2">BB</h1>
<h3 id="child3">CC</h1>
<h2 id="child4">DD</h1>
</div>
如果有選擇器如下：
#child2:first-child，選中AA氮兵；
#child2:first-of-type裂逐，選中BB；
#child4:first-child泣栈，選中AA卜高；
#child4:first-of-type弥姻，選中BB。
實(shí)例如下：
<style>
.item1:first-child{
color: red;
}
.item1:first-of-type{
background: blue;
}
</style>
<div class="ct">
<p class="item1">aa</p>
<!-- 父元素div下第一個(gè)類為item1的子元素掺涛，父元素div下第一個(gè)類為item1的p標(biāo)簽子元素懂更，
因此滿足.item1:first-child和.item1:first-of-type-->
<h3 class="item1">bb</h3>
<!-- 父元素div下第一個(gè)類為item1的h3標(biāo)簽子元素，滿足.item1:first-of-type-->
<h3 class="item1">ccc</h3>
</div>
輸出結(jié)果如下：
