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

• id：id選擇器宜岛，使用#name定義（name為id名，可任意取名）功舀，使用id="name"調(diào)用萍倡，其優(yōu)先級(jí)高于類選擇器，一個(gè)標(biāo)簽只能有一個(gè)id且每個(gè)id只能使用一次辟汰，多用于頁(yè)面分塊的塊級(jí)標(biāo)簽上列敲；
• class：類選擇器，使用.name定義（name為類名莉擒，可任意取名）酿炸，使用class="name"調(diào)用，一個(gè)標(biāo)簽可以有多個(gè)類且同一個(gè)類可以用到不同的標(biāo)簽上涨冀，多用于多個(gè)標(biāo)簽樣式相似或完全相同時(shí)填硕；

2、CSS選擇器常見的有幾種?

基礎(chǔ)選擇器

• *:通用元素選擇器鹿鳖，匹配頁(yè)面所有元素扁眯；
• #id:id選擇器，匹配特定id的元素翅帜；
• .class：類選擇器姻檀，匹配class包含（不是等于）特定類的元素；
• element ：標(biāo)簽選擇器涝滴，匹配相同的標(biāo)簽绣版。

組合選擇器

• E,F: 多元素選擇器，用,分隔歼疮，同時(shí)匹配元素E和元素F杂抽；
• E F :后代選擇器，用空格分隔韩脏，匹配E元素所有的后代元素F缩麸；
• E>F :子元素選擇器，用>分隔赡矢，匹配E元素的所有直接子元素F杭朱；
• E+F:直接相鄰選擇器阅仔，匹配E元素之后相鄰的同級(jí)元素F；
• E~F :普通相鄰選擇器弧械，匹配E元素之后所有的同級(jí)元素F（無論直接相鄰與否）八酒；
• .class1.class2 :匹配同時(shí)有class1和class2的元素，class1和class2直接沒有分隔梦谜；
• element#id :匹配具有id的element元素丘跌；

屬性選擇器

• E[attr] :匹配所有具有屬性attr的E元素，div[id]就能取到所有有id屬性的div元素唁桩；
• E[attr=value] :匹配所有attr屬性為value的元素闭树；
• 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:link :匹配所有未被點(diǎn)擊的鏈接；
• E:visited :匹配所有已被點(diǎn)擊的鏈接米奸；
• E:active :匹配鼠標(biāo)已經(jīng)點(diǎn)下昼接，還沒釋放的鏈接；
• E:hover :匹配鼠標(biāo)懸停在上面的E元素悴晰；
• E:focus :匹配獲得當(dāng)前焦點(diǎn)的E元素慢睡；
• E:lang(c) :匹配lang屬性等于c的E元素
• E:enabled :匹配表單中可用的元素；
• E:disabled :匹配表單中禁用的元素铡溪；
• E:checked :匹配表單中被選中的radio或checkbox元素漂辐；
• E::selection :匹配用戶當(dāng)前選中的元素；
• E:nth-child(n) :匹配E元素的父元素的第n個(gè)子元素棕硫，從1開始計(jì)數(shù)髓涯，若該元素不是E元素，則不選擇哈扮；
• E:nth-last-child(n) :匹配E元素的父元素倒數(shù)第n個(gè)子元素纬纪，從1開始計(jì)數(shù)，若該元素不是E元素滑肉，則不選擇育八；
• E:nth-of-type(n) :匹配E元素的父元素的第n個(gè)E子元素，從1開始計(jì)數(shù)赦邻，且只計(jì)算E元素；
• E:nth-last-of-type(n) :匹配E元素的父元素倒數(shù)的第n個(gè)E子元素实檀，從1開始計(jì)數(shù)惶洲，且只計(jì)算E元素按声；
• E:first-child :匹配E元素的父元素的第一個(gè)元素，若該元素不是E元素恬吕，則不選擇签则，等同于E:nth-child(1)；
• E:last-child :匹配E元素的父元素倒數(shù)的第一個(gè)元素铐料，若該元素不是E元素渐裂，則不選擇，等同于E:nth-last-child(1)钠惩；
• E:first-of-type :等同于E:nth-of-type(1)
• E:last-of-type :E:nth-last-of-type(1)
• E:only-child :匹配其父元素下僅有E這一個(gè)元素的E元素柒凉；
• E:only-of-type :匹配其父元素下僅有E這一個(gè)元素的標(biāo)簽的E元素；
• E::first-line :匹配E元素內(nèi)容的第一行篓跛；
• E::first-letter :匹配E元素內(nèi)容的第一個(gè)字母膝捞；
• E::before :在E元素之前插入生成的內(nèi)容；
• E::after 在E元素之后插入生成的內(nèi)容愧沟；

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

1饰恕、在屬性后面使用 !important 會(huì)覆蓋頁(yè)面內(nèi)任何位置定義的元素樣式
2寥枝、作為style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式
3、id選擇器
4混坞、類選擇器
5狐援、偽類選擇器
6、屬性選擇器
7拔第、標(biāo)簽選擇器
8咕村、通配符選擇器
9、瀏覽器自定義
復(fù)雜場(chǎng)景優(yōu)先級(jí)計(jì)算：通過比較標(biāo)簽數(shù)蚊俺，先比較最高優(yōu)先級(jí)的標(biāo)簽數(shù)懈涛，數(shù)量多的優(yōu)先級(jí)高，若最高優(yōu)先級(jí)的標(biāo)簽數(shù)相同泳猬，比較次一級(jí)的標(biāo)簽數(shù)批钠，以此類推。

4得封、a:link, a:hover, a:active, a:visited 的順序是怎樣的埋心？ 為什么？

a:link
a:visited
a:hover
a:active

因?yàn)閍:visited在點(diǎn)擊過鏈接一次后便永久生效會(huì)覆蓋之前的a標(biāo)簽偽類css忙上，而我們依然需要a:hover和a:active的效果拷呆，所以a:visited要放在a:link后，a:hover、a:active前茬斧。
從觸發(fā)動(dòng)作上看腰懂，a:active效果觸發(fā)時(shí)依然在觸發(fā)a:hover效果，所以a:hover要寫在a:active前项秉，否則a:hover會(huì)覆蓋a:active绣溜。

5、以下選擇器分別是什么意思?

#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的元素中岁诉，ID名為header的所有后代中與class名為logo同級(jí)的兄弟選擇器p*/
#header input[type="text"]{}
/*選擇id為header的元素中锚沸，input標(biāo)簽中type屬性為text的元素*/ ```

6.列出你知道的偽類選擇器

E:link
E:visited
E:active
E:hover
E:focus
E:enabled
E:disabled
E::selection
E:first-child
E:last-child
E:nth-child(n)
E:nth-of-type(n)
E:first-of-type
E:last-of-type

7.div:first-child和div:first-of-type的作用和區(qū)別

div:first-child:匹配div的父元素的第一個(gè)子元素，且這個(gè)元素為div元素
div:first-of-type :匹配div的父元素下同種標(biāo)簽的第一個(gè)子元素唉侄，且這個(gè)元素為div元素

區(qū)別在后者還分是不是在同種標(biāo)簽下

8.運(yùn)行如下代碼咒吐，解析下輸出樣式的原因。

<style>
.item1:first-child{
color: red;
}
.item1:first-of-type{
background: blue;
}
</style>
<div class="ct">
<p class="item1">aa</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div> ```
.item1:first-child選擇.item1的父元素即.ct的第一個(gè)子元素属划，是其自身恬叹。所以aa字體變紅。

.item1:first-of-type選擇.item1的父元素即.ct的擁有相同標(biāo)簽的第一個(gè)子元素同眯。所以aa和bb背景色變藍(lán)绽昼。