1、class和id的使用場景分別是什么？
首先，一個HTML文件中class名字可以有多個相同的，但是id的名字是唯一的；其次，如果是寫css樣式，那么id選擇器的優(yōu)先級高于class選擇器（就簡單選擇器來說，只單純考慮單一樣式書寫，不包括復(fù)雜選擇器情況下）。
2、CSS選擇器常見的有幾種？
1. 基礎(chǔ)選擇器
- class選擇器
- id選擇器
- 通用元素選擇器（通配符選擇器）“*”；
- element選擇器
2. 組合選擇器
- one,two —— 多元素選擇器。兩個元素或兩個class或兩個id選擇器，同時匹配one和two,中間用“,”分隔
- one two —— 后代選擇器。one下的two；two是one的子元素（匹配所有子元素），中間用空格分隔
- one>two —— 直接子元素選擇器。匹配one的直接子元素two（可能會有多個），中間用“>”來分隔。
- one~two —— 普通相鄰選擇器。匹配one之后的同級元素two（鄰居但是不管是否直接相鄰），中間用“+”分隔。
- one+two ——直接相鄰子元素。匹配one后的直接同級元素two，中間用“+”來分隔。
- .class1.class2 —— 選擇出某個元素既含有class1，也含有class2。中間沒有分隔符。
- element#my —— 選擇出某個元素，而且id是my的元素。中間沒有分隔符。
3. 偽類選擇器
one:link —— 匹配所有未被點擊的鏈接
one:visited —— 匹配所有已經(jīng)點擊過的鏈接
one:active ——匹配所有點擊時的鏈接
one:hover —— 匹配所有鼠標懸停其上的鏈接
one:focus —— 匹配所有已經(jīng)獲取焦點的元素one
one:first-child —— 匹配作為第一個子元素的one
one:last-child —— 匹配作為最后一個子元素的one
one:enabled —— 匹配表單中可用的元素
one:disabled —— 匹配表單中不可用的元素
one:checked —— 匹配表單中的選中的radio或checkbox元素。
one:lang() —— 匹配lang屬性等于c的one元素
one::selection —— 匹配one中已被選擇的部分
one:root —— 匹配文檔的根元素，對于HTML文檔來說，根元素即為HTML標簽
one:nth-child(n) —— 匹配作為第n個子元素的one
one:nth-of-type(num) —— 匹配使用同種標簽的第num個元素one（其他同nth-child(n)）
one:first-of-type —— 匹配第一個使用同種標簽的元素one，等于one:nth-of-type(1)
one:last-of-type —— 匹配最后一個使用同種標簽的元素one
one:only-child —— 匹配父元素下僅有的一個子元素
one:only-of-type —— 匹配父元素下使用同種標簽的唯一一個子元素，等同于：:first-of-type:last-of-type或:nth-of-type(1):nth-last-child(1)
one:empty —— 匹配一個不包換任何子元素的元素（文本節(jié)點也是子元素）
one:not(selector) —— 匹配不符合當前選擇器的任何元素
4. 偽元素選擇器
- one::after —— 在one元素之后插入生成的內(nèi)容
- one::before —— 在one元素之前插入生成的內(nèi)容
- one::first-letter —— 匹配one元素的第一個字符
- one::first-line —— 匹配one元素的第一行
5. 屬性選擇器
- one[attr] —— 匹配所有有attr屬性的元素。同理，span[id]就可以獲取到所有帶有id屬性的元素
- one[attr=value] —— 匹配所有attr值為value的元素，如，
input[type="text"]就可以匹配到所有type是text的input元素。 - one[attr~=value] —— 匹配所有屬性attr具有多個空格分隔，其中一個值等于value的元素
- one[attr^=value] —— 匹配所有attr屬性的值為value開頭的元素
- one[attr$=value] —— 匹配所有attr屬性的值為value結(jié)尾的元素
- one[attr*=value] —— 匹配所有attr屬性的值含有value的元素
3、選擇器的優(yōu)先級是怎么樣的？對于復(fù)雜場景怎樣計算優(yōu)先級？
優(yōu)先級順序
- 在屬性后使用!important會使此屬性擁有最高級別的優(yōu)先級，換句話說，可以認為這個屬性會覆蓋其他所有影響此樣式的重寫樣式。
- 寫在html文件中的，某個元素的style屬性，即為行內(nèi)樣式。
- id選擇器
- class選擇器
- 偽類選擇器
- 屬性選擇器
7.標簽選擇器
8.通配符選擇器 - 瀏覽器自定義
除此之外，有一個需要注意的：
針對同一個元素的樣式，如果寫多遍，那么寫在后面的會覆蓋前面的，比如：
div{ color: #f00; }
div{ color: #blue; }
那么這時，div的color屬性值其實是藍色的。
復(fù)雜場景的計算
我們可以定義一個優(yōu)先級的規(guī)則：
- 行內(nèi)樣式：<p style="color: #f00"></p> —— a
- id選擇器： —— b
- class,屬性選擇器和偽類選擇器 —— c
- 標簽選擇器，偽元素 —— d
舉例說明：
.discount-compile .dc-cont>label input[type="checkbox"]:checked+span{position:absolute; top:.3rem; z-index:9; background:url(../img/radio.png) no-repeat center center; width:.8rem; height:.8rem; background-size: cover; left:.5rem;}
這里面有兩個標簽選擇器（label,span），兩個類選擇器（.discount-compile ，.dc-cont），一個屬性選擇器（input[type="checkbox"]），一個偽類選擇器（:checked）
可以得到：a=0;b=0;c=4;d=2
#discount-compile input[type="checkbox"]:checked+span{position:absolute; top:.3rem; z-index:9; background:url(../img/radio.png) no-repeat center center; width:.8rem; height:.8rem; background-size: cover; left:.5rem;}
這里面有一個id選擇器（#discount-compile），一個標簽選擇器（span），一個屬性選擇器（input[type="checkbox"]），一個偽類選擇器（:checked）
可以得到：a=0;b=1;c=2;d=1
看得時候abcd是層層遞進的，a的數(shù)字一樣就比較b的數(shù)字，以此類推。
那么，第二種的優(yōu)先級比第一種高，
4、a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么？
這四個的順序分別是：
a:link
a:visited
a:hover
a:active
原因是如果順序錯亂會導(dǎo)致某些樣式不能夠顯示，例如將a:visited寫在第一位，那么a:link就不再起作用，無論這個鏈接是否被訪問過；例如將a:visited寫在第三位，那么a:link和a:hover都不再起作用，因為a:visited已經(jīng)將這兩個樣式都覆蓋；例如將a:visited寫在第四位，那么a:link和a:hover和a:active都不在起作用，因為a:visited已經(jīng)將所有樣式都覆蓋。這個的順序決定了頁面上的a標簽的展現(xiàn)行為，不能出錯。
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的子元素和header下的標簽是h3的子元素
#header .nav>li{} —— 匹配id值為header中class值為nav的子元素的標簽為li的直接子元素
#header a:hover{} —— 匹配id值為header中所有的的a標簽，設(shè)置其鼠標懸停時的樣式
#header .logo~p{} —— 匹配id值為header中所有的class值為logo的元素的其后所有的p標簽
#header input[type="text"]{} —— 匹配id值為header中所有的標簽為input中的type屬性是text的元素
6、寫出你知道的偽類選擇器
one:link —— 匹配所有未被點擊的鏈接
one:visited —— 匹配所有已經(jīng)點擊過的鏈接
one:active ——匹配所有點擊時的鏈接
one:hover —— 匹配所有鼠標懸停其上的鏈接
one:focus —— 匹配所有已經(jīng)獲取焦點的元素one
one:first-child —— 匹配作為第一個子元素的one
one:last-child —— 匹配作為最后一個子元素的one
one:enabled —— 匹配表單中可用的元素
one:disabled —— 匹配表單中不可用的元素
one:checked —— 匹配表單中的選中的radio或checkbox元素。
one:lang() —— 匹配lang屬性等于c的one元素
one::selection —— 匹配one中已被選擇的部分
one:root —— 匹配文檔的根元素，對于HTML文檔來說，根元素即為HTML標簽
one:nth-child(n) —— 匹配作為第n個子元素的one
one:nth-of-type(num) —— 匹配使用同種標簽的第num個元素one（其他同nth-child(n)）
one:first-of-type —— 匹配第一個使用同種標簽的元素one，等于one:nth-of-type(1)
one:last-of-type —— 匹配最后一個使用同種標簽的元素one
one:only-child —— 匹配父元素下僅有的一個子元素
one:only-of-type —— 匹配父元素下使用同種標簽的唯一一個子元素，等同于：:first-of-type:last-of-type或:nth-of-type(1):nth-last-child(1)
one:empty —— 匹配一個不包換任何子元素的元素（文本節(jié)點也是子元素）
one:not(selector) —— 匹配不符合當前選擇器的任何元素
7、div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和區(qū)別
- div:first-child —— 是div作為子元素的情況，匹配div作為第一個子元素的情況
- div:first-of-type —— 是div作為子元素的情況，匹配div作為第一個子元素的情況
- div :first-child —— 是div作為父元素的情況，匹配div的子元素中的第一個元素（沒有指定類型那么則為第一個元素）
- div :first-of-type —— 是div作為父元素的情況，匹配div的子元素中的所有類型的標簽的每一個的第1個元素（比較繞口）舉個例子說明：
<style>
div :nth-of-type(2){background:#f00;}
</style>
<div>
<p>我是第一個p</p>
<article>我是第一個article</article>
<h5>我是第一個h5</h5>
<p>我是第二個p</p>
<article>我是第二個article</article>
<p>我是第三個p</p>
<article>我是第三個article</article>
<h5>我是第二個h5</h5>
</div>
結(jié)果是“我是第二個p”，“我是第二個article”，“我是第二個h5”的背景顏色都會變成紅色。
8、運行以下代碼并解釋輸出樣式的原因
<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>
運行結(jié)果如圖：
我們來分析一下：
首先看一下style中的內(nèi)容：
.item1:first-child{color: red;}意思是class為item1的元素作為第一個子元素（此處不管是什么類型的標簽，瀏覽器不做判斷，就是我們能看到的第一個），我的顏色是紅色，得到第一行的aa字體顏色是紅色；第二句.item1:first-of-type{background: blue;}意思是class為item1的元素作為子元素的情況，我們可以看到，div中包著三個標簽，一個p標簽，兩個h3標簽。那么.item1:first-of-type事實上取的是每一個不同標簽的第一個元素，即第一個p標簽和第一個h3標簽。所以，aa和bb的背景色都變?yōu)樗{色，黑色的字是瀏覽器默認給的顏色。
