class 和 id 的使用場景?
當我們需要將某些元素歸為一類并賦予它們相同的樣式時采用class；
當我們希望標記某一個元素且賦予它獨有的樣式時采用id。
CSS選擇器常見的有幾種?
1、基礎選擇器；
2、組合選擇器；
3、屬性選擇器；
4、偽類選擇器；
5、偽元素選擇器。
選擇器的優(yōu)先級是怎樣的?對于復雜場景如何計算優(yōu)先級？
！important（盡可能避免使用） > 行間樣式 ＞ id選擇器 ＞ 類選擇器(class) > 偽類選擇器 > 屬性選擇器 ＞ 標簽選擇器 ＞ 通配符選擇器(*) > 瀏覽器自定義樣式
在較復雜的場景下，可以簡化為對選擇器優(yōu)先級和數(shù)量的加權，我們設：
行內樣式為a
id選擇器為b
class選擇器、屬性選擇器和偽類選擇器為c
標簽選擇器、偽元素選擇器為d
先對比a類選擇器的數(shù)量，數(shù)量較多的則優(yōu)先級高。若a類數(shù)量相等，再對比b類，以此類推。
a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么？
a:hover必須寫在a:link和a:visited之后，a:active必須寫在其它三者之后。
因為它們都屬于偽類選擇器，優(yōu)先級是一樣的，所以誰在后面，就可以覆蓋前面的樣式。當鼠標懸停在元素上時，hover的樣式會覆蓋link和visited的樣式，而當鼠標按下時，active的樣式則會覆蓋其它三者的樣式。
以下選擇器分別是什么意思?
#header{
} //匹配某個id=header的元素
.header{
} //匹配所有class=header的元素
.header .logo{
} //匹配所有class=header的元素后代中class=logo的元素
.header.mobile{
} //匹配所有class=header且class=mobile的元素
.header p, .header h3{
} //匹配所有class=header的元素后代中所有<p>標簽內的元素和<h3>標簽內的元素
#header .nav>li{
} //匹配某個id=header的元素后代中class=nav的元素的直接子元素中所有<li>標簽內的元素
#header a:hover{
} //當鼠標懸停在某個id=header的元素后代中任意一個<a>標簽內的元素上時這個元素的樣式
#header .logo~p{
} //匹配某個id=header的元素后代中所有位于class=logo的元素之后的同級<p>標簽內的元素
#header input[type="text"]{
} //匹配某個id=header的元素后代中所有type="text"的<input>標簽內的元素
列出你知道的偽類選擇器
link //匹配未點擊的鏈接
visited //匹配點擊過的鏈接
hover //匹配鼠標懸停時的元素
active //匹配鼠標按下尚未釋放時的元素
focus //匹配獲得焦點的元素
selection //匹配用戶當前選中的元素
first-child //匹配第一個子元素
nth-child(n) //匹配第n個子元素
first-of-type //匹配使用同種標簽的第一個子元素
nth-of-type(n) //匹配使用同種標簽的第n個子元素
div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和區(qū)別 （注意空格的作用）
div:first-child
//匹配父級元素下第一個且為div的子元素
div:first-of-type
//匹配所有同級元素中的第一個div元素
div :first-child
//匹配所有div元素下的第一個子元素
div :first-of-type
//匹配所有div元素下的第一個div子元素
運行如下代碼，解析下輸出樣式的原因。
<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>
在<style>標簽內，第一個選擇器.item1:first-child代表父級元素下第一個且class=item1的子元素，所以aa的顏色為red；第二個選擇器.item1:first-of-type代表父級元素下每個標簽類型中的第一個元素，因此aa和bb的背景顏色為blue。
