class 和 id 的使用場(chǎng)景?

class：類選擇器，指定標(biāo)簽的類名雹熬】聿耍可以用到不同的標(biāo)簽上。
id：id選擇器橄唬，指定標(biāo)簽的id赋焕，定位到頁(yè)面的唯一元素。

CSS選擇器常見的有幾種?

CSS常見的選擇器共有5種仰楚，分別為：基礎(chǔ)選擇器隆判、組合選擇器、屬性選擇器僧界、偽類選擇器侨嘀、偽元素選擇器。

基礎(chǔ)選擇器

組合選擇器

屬性選擇器

偽類選擇器

CSS偽類是加在選擇器后面的用來(lái)指定元素狀態(tài)的關(guān)鍵字魁索。

偽元素選擇器

選擇器的優(yōu)先級(jí)是怎樣的?對(duì)于復(fù)雜場(chǎng)景如何計(jì)算優(yōu)先級(jí)？

CSS優(yōu)先級(jí)從高到低分別是：

1饶火、在屬性后面使用!important會(huì)覆蓋頁(yè)面內(nèi)任何位置定義的元素樣式
2支鸡、作為style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式
3冬念、id選擇器
4趁窃、class類選擇器
5牧挣、偽類選擇器
6、屬性選擇器
7醒陆、標(biāo)簽選擇器
8瀑构、通配符選擇器
9、瀏覽器自定義

復(fù)雜場(chǎng)景：

**計(jì)算方法：
a=行內(nèi)樣式 <div style="xxx"></div>
b=ID選擇器
c=類刨摩，偽類和屬性選擇器
d=標(biāo)簽選擇器寺晌、偽元素選擇器
**

舉個(gè)例子：

*             {}  /* a=0 b=0 c=0 d=1 -> 0,0,0,1 */
p             {}  /* a=0 b=0 c=0 d=1 -> 0,0,0,1 */
a:hover       {}  /* a=0 b=0 c=1 d=1 -> 0,0,1,1 */
ul li         {}  /* a=0 b=0 c=0 d=2 -> 0,0,0,2 */
ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> 0,0,0,3 */
h1+input[type=hidden]{}  /* a=0 b=0 c=1 d=2 -> 0,0,1,2 */
ul ol li.active   {}  /* a=0 b=0 c=1 d=3 -> 0,0,1,3 */
#ct .box p        {}  /* a=0 b=1 c=1 d=1 -> 0,1,1,1 */
div#header:after  {}  /* a=0 b=1 c=0 d=2 -> 0,1,0,2 */
style=""          /* a=1 b=0 c=0 d=0 -> 1,0,0,0 */
依照a、b澡刹、c呻征、d 權(quán)重依次遞減,每次比較先由a開始。

a:link, a:hover, a:active, a:visited 的順序是怎樣的罢浇？ 為什么陆赋？

順序：
a:link
a:visited
a:hover
a:active
原因：
一、 當(dāng)選擇器優(yōu)先級(jí)別相同時(shí)嚷闭，后定義的會(huì)覆蓋先定義的
二攒岛、

• 鼠標(biāo)經(jīng)過(guò)的“未訪問(wèn)鏈接”同時(shí)激活a:link、a:hover兩種屬性胞锰，如果a:link放在后面灾锯，在鏈接未被訪問(wèn)的狀態(tài)，a:hover就被a:link覆蓋嗅榕，只會(huì)顯示a:link的屬性顺饮；
• 鼠標(biāo)經(jīng)過(guò)的“已訪問(wèn)鏈接”同時(shí)激活a:visited、a:hover兩種屬性凌那，如果a:visited放在后面兼雄，那么在鏈接被訪問(wèn)狀態(tài)，只會(huì)顯示a:visited的屬性案怯；
• 當(dāng)鼠標(biāo)點(diǎn)擊鏈接是同時(shí)擁有a:active和a:hover兩種屬性君旦，若a:hover放后面會(huì)覆蓋a:active的屬性定義
  故hover在link和visited后面，active放在hover后面嘲碱，按照一般性原則金砍，link最好放最前面。

以下選擇器表示的含義

#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的元素包裹的處于hover狀態(tài)的a元素 */
}
#header .logo~p{         /*   id為header的元素包裹的class為logo的元素后面的同級(jí)元素p */
}
#header input[type="text"]{         /*   id為header的元素包裹的type=text的input元素 */
}

列出知道的偽類選擇器

見標(biāo)題2下的回答

div:first-child麦锯、div:first-of-type恕稠、div :first-child和div :first-of-type的作用和區(qū)別

• div:first-child div父元素下，也就是與div同級(jí)的元素中的第一個(gè)元素扶欣，且這個(gè)元素為div
• div:first-of-type div父元素下的第一個(gè)使用div的標(biāo)簽
• div :first-child div元素下的第一個(gè)子元素
• div :first-of-type div元素下所有的同類型的第一個(gè)元素

div:first-child 運(yùn)行代碼如下：

div:first-of-type 運(yùn)行代碼如下：

div :first-child 運(yùn)行代碼如下：

div :first-of-type 運(yùn)行代碼如下：

運(yùn)行如下代碼枫攀，解析下輸出樣式的原因

運(yùn)行結(jié)果：

• class為item1父元素就是class為ct的div括饶，然后找到的第一個(gè)子元素，匹配是否有item1来涨，匹配成功图焰，故aa顏色設(shè)置為red；
• class為item1父元素就是class為ct的div蹦掐，然后在該div下技羔，尋找各類標(biāo)簽的第一個(gè)元素，匹配是否為item1笤闯。發(fā)現(xiàn)第一個(gè)p標(biāo)簽,h3第一個(gè)標(biāo)簽滿足條件堕阔，所以aa,bb的背景色變藍(lán)。