1.class 和 id 的使用場景?
Id屬性值在頁面上唯一，用于選擇指定元素，class作為類選擇器，匹配同一類型的，適用于多個元素有共同的樣式
2.CSS選擇器常見的有幾種?
基礎選擇器：
*通用元素選擇器，匹配頁面的任何元素（這也決定了其很少使用）
#idid選擇器，匹配特定的id元素
.class類選擇器，匹配class包含（不是等于）特定類的元素
element標簽 選擇器組合選擇器
E,F多元素選擇器，用，分開，同時匹配元素E或元素F
E F后代選擇器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下遞歸）元素F
E>F子元素選擇器，用>分隔，匹配E元素的所有直接子元素
E+F直接相鄰選擇器，匹配E元素之后的相鄰同級元素F
E~F普通相鄰選擇器（弟弟選擇器），匹配E元素之后的同級元素F（無論直接相鄰與否）
.class1.class2id和class選擇器連寫的時候中間沒有分隔符， .和#本身充當分隔符的元素
Element#idid和class選擇器連寫的時候中間沒有分隔符， .和#本身充當分隔符的元素屬性選擇器
E[attr]匹配所有具有屬性attr的元素，div[id]能取到所有有id屬性的div
E[attr=value]匹配屬性attr 值為value的元素，div[id=test]， 匹配id=test的div
E[attr ~= value]匹配所有屬性attr具有多個空格分隔、其中一個值等于value的元素
E[attr ^= value]匹配屬性attr的值以value開頭的元素
E[attr $= value]匹配屬性attr的值以value結(jié)尾的元素
E[attr *= value]匹配屬性attr的值包含value的元素偽類選擇器
E:first-child匹配元素E的第一個子元素
E:link匹配所有未被點擊的鏈接
E:visited匹配所有已被點擊的鏈接
E:active匹配鼠標已經(jīng)其上按下、還沒有釋放的E元素
E:hover匹配鼠標懸停其上的E元素
E:focus匹配獲得當前焦點的E元素
E:enabled匹配表單中可用的元素
E:disabled匹配表單中禁用的元素
E:checked匹配表單中選中的radio或checkbox元素
E::selection匹配用戶當前選中的元素
E:nth-child（n）匹配其父元素的第n個子元素，第一個編號為1
E:nth-last-child（n）匹配其父元素的倒數(shù)第n個子元素，第一個編號為1
E:nth-of-type（n）與:nth-child()作用類似，但是僅匹配使用同種標簽的元素
E:nth-last-of-type（n）與:nth-last-child（）作用類似，但是僅匹配使用同種標簽的元素
E:first-of-type匹配父元素下使用同種標簽的第一個子元素，等同于:nth-of-type(1)
E:last-of-type匹配父元素下使用同種標簽的最后一個子元素，等同于:nth-last-of-type(1)偽元素選擇器
E::first-line匹配E元素的第一行
E:: first-letter匹配E元素內(nèi)容的第一個字母
E::before在E元素之前插入生成的內(nèi)容
E::after在E元素之后插入生成的內(nèi)容
3、選擇器的優(yōu)先級是怎樣的?對于復雜場景如何計算優(yōu)先級？
CSS優(yōu)先級從高到低分別是：
- 在屬性后面使用 !important 會覆蓋頁面內(nèi)任何位置定義的元素樣式
- 作為style屬性寫在元素標簽上的內(nèi)聯(lián)樣式
- id選擇器
- 類選擇器
- 偽類選擇器0
- 屬性選擇器
- 標簽選擇器
- 通配符選擇器
- 瀏覽器自定義
復雜場景時，有以下規(guī)則：
- 行內(nèi)樣式 <div style="xxx"></div> ==> a
- ID 選擇器 ==> b
- 類，屬性選擇器和偽類選擇器 ==> c
- 標簽選擇器、偽元素 ==> d
然后對于復雜組合選擇器，逐一比較a b c d 的值 ，如果a值大則其優(yōu)先級高，如果小則優(yōu)先級低，相等則比較b值，以此類推
4、a:link, a:hover, a:active, a:visited的順序是怎樣的？ 為什么？
一般順序應該如此
a:linka:visiteda:hover-
a:active
這樣順序的原因是：選擇器優(yōu)先級別相同時，后面的會覆蓋前面的，當鏈接未被操作時，a:link起作用，當鼠標移動到a鏈接上的時候，a:hover覆蓋a:link起作用，當點擊a鏈接時，a:active覆蓋a:link起作用。
當a鏈接被點擊后，變成已瀏覽狀態(tài)，a:visited覆蓋a:link起作用，當再次移動到當鼠標移動到a鏈接上的時候，a:hover覆蓋a:visited起作用，當點擊a鏈接時，a:active覆蓋a:visited起作用。
5、以下選擇器分別是什么意思?
-
#header{ }
Id選擇器，匹配id值為header的元素 -
.header{ }
Class選擇器，匹配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元素（當鼠標放置在上面時） -
#header .logo~p{ }
匹配id值為header的元素后代中的class值為logo的元素的同級元素p -
#header input[type="text"]{ }
匹配id值為header元素的具有type屬性值為text的后代input元素
6、列出你知道的偽類選擇器
偽類選擇器：利用文檔結(jié)構(gòu)樹實現(xiàn)元素過濾，通過文檔結(jié)構(gòu)的相互關(guān)系來匹配特定的元素，從而減少文檔內(nèi)class屬性和id屬性的定義，使得文檔更簡潔
E:first-child 匹配元素E的第一個子元素
E:link 匹配所有未被點擊的鏈接
E:visited 匹配所有已被點擊的鏈接
E:active匹配鼠標已經(jīng)其上按下、還沒有釋放的E元素
E:hover 匹配鼠標懸停其上的E元素
E:focus 匹配獲得當前焦點的E元素
E:enabled 匹配表單中可用的元素
E:disabled 匹配表單中禁用的元素
E:checked 匹配表單中選中的radio或checkbox元素
E::selection匹配用戶當前選中的元素
E:nth-child（n） 匹配其父元素的第n個子元素，第一個編號為1
E:nth-last-child（n） 匹配其父元素的倒數(shù)第n個子元素，第一個編號為1
E:nth-of-type（n） 與:nth-child()作用類似，但是僅匹配使用同種標簽的元素
E:nth-last-of-type（n） 與:nth-last-child（）作用類似，但是僅匹配使用同種標簽的元素
E:first-of-type 匹配父元素下使用同種標簽的第一個子元素，等同于:nth-of-type(1)
E:last-of-type 匹配父元素下使用同種標簽的最后一個子元素，等同于:nth-last-of-type(1)
7、div:first-child和div:first-of-type的作用和區(qū)別
div:first-child div的父元素下的第一個子元素
div:first-of-type div的父元素下第一個div元素
8、運行如下代碼，解析下輸出樣式的原因。
.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{ color: red;}` 代表class值為item1的元素的父元素下的第一個子元素的字體顏色為紅色，即第一個子元素p為紅色，即aa為紅色
`.item1:first-of-type{background: blue;}`代表class值為item1的元素的父元素下的第一個同類型的子元素的背景顏色為藍色，代碼中class值為item1的元素有三個，類型為兩種p和h3，p元素對應父元素下的第一個同類型的子元素就是自己，即aa的背景為藍色。兩個h3元素對應父元素下的第一個同類型的子元素就是第一個h3元素，即bb的背景為藍色
