1.class 和 id 的使用場景?
多個標(biāo)簽可以使用同一個class牵咙，一個id只能對應(yīng)一個標(biāo)簽
2.CSS選擇器常見的有幾種?
基礎(chǔ)選擇器
| * | #id | .class | element |
|---|---|---|---|
| 通用元素選擇器，匹配頁面任何元素（這也就決定了我們很少使用） | 通用元素選擇器，匹配頁面任何元素（這也就決定了我們很少使用） | 類選擇器，匹配class包含(不是等于)特定類的元素 | 標(biāo)簽選擇器 |
組合選擇器
E,F 多元素選擇器熙揍，用,分隔茬故，同時匹配元素E或元素F
E F 后代選擇器盖灸，用空格分隔，匹配E元素所有的后代（不只是子元素磺芭、子元素向下遞歸）元素F
E>F 子元素選擇器赁炎，用>分隔，匹配E元素的所有直接子元素
E+F 直接相鄰選擇器钾腺，匹配E元素之后的相鄰的同級元素F
E~F 普通相鄰選擇器（弟弟選擇器）徙垫，匹配E元素之后的同級元素F（無論直接相鄰與否）
.class1.class2 id和class選擇器，和選擇器連寫的時候中間沒有分隔符放棒，. 和 # 本身充當(dāng)分隔符的元素
element#id id和class選擇器姻报，和選擇器連寫的時候中間沒有分隔符，. 和 # 本身充當(dāng)分隔符的元素
屬性選擇器
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 匹配鼠標(biāo)已經(jīng)其上按下厢破、還沒有釋放的E元素
E:hover 匹配鼠標(biāo)懸停其上的E元素
E:focus 匹配獲得當(dāng)前焦點的E元素
E:lang(c) 匹配lang屬性等于c的E元素
E:enabled 匹配表單中可用的元素
E:disabled 匹配表單中禁用的元素
E:checked 匹配表單中被選中的radio或checkbox元素
E::selection 匹配用戶當(dāng)前選中的元素
E:root 匹配文檔的根元素荣瑟，對于HTML文檔，就是HTML元素
E:nth-child(n) 匹配其父元素的第n個子元素溉奕，第一個編號為1
E:nth-last-child(n) 匹配其父元素的倒數(shù)第n個子元素褂傀，第一個編號為1
E:nth-of-type(n) 與:nth-child()作用類似，但是僅匹配使用同種標(biāo)簽的元素
E:nth-last-of-type(n) 與:nth-last-child() 作用類似加勤，但是僅匹配使用同種標(biāo)簽的元素
E:last-child 匹配父元素的最后一個子元素，等同于:nth-last-child(1)
E:first-of-type 匹配父元素下使用同種標(biāo)簽的第一個子元素同波，等同于:nth-of-type(1)
E:last-of-type 匹配父元素下使用同種標(biāo)簽的最后一個子元素鳄梅，等同于:nth-last-of-type(1)
E:only-child 匹配父元素下僅有的一個子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type 匹配父元素下使用同種標(biāo)簽的唯一一個子元素未檩，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:empty 匹配一個不包含任何子元素的元素戴尸，文本節(jié)點也被看作子元素
E:not(selector) 匹配不符合當(dāng)前選擇器的任何元素
n的取值
1，2冤狡，3孙蒙，4，5
2n+1, 2n, 4n-1
odd, even
偽元素選擇器
E::first-line 匹配E元素內(nèi)容的第一行
E::first-letter 匹配E元素內(nèi)容的第一個字母
E::before 在E元素之前插入生成的內(nèi)容
E::after 在E元素之后插入生成的內(nèi)容
選擇器優(yōu)先級
如果多條規(guī)則作用于同一個元素上悲雳，且定義的相同屬性的不同值挎峦，比如
3.選擇器的優(yōu)先級是怎樣的?對于復(fù)雜場景如何計算優(yōu)先級？
瀏覽器自定義 < 通配符選擇器(*) < 標(biāo)簽選擇器 < 屬性選擇器 < 偽類選擇器 < 類選擇器 < id選擇器 < 內(nèi)聯(lián)樣式(行內(nèi)樣式) < 在屬性后面使用 !important
復(fù)雜場景
行內(nèi)樣式 ==> a
ID 選擇器 ==> b
類合瓢，屬性選擇器和偽類選擇器 ==> c
標(biāo)簽選擇器坦胶、偽元素 ==> d
4.a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么？
愛恨原則（LoVe/HAte）顿苇，即四種偽類的首字母:LVHA峭咒。
a:link a:visited , a:hover , a:active,
一個鼠標(biāo)經(jīng)過的未訪問鏈接同時擁有a:link、a:hover兩種屬性纪岁，瀏覽器會先滿足最近的凑队，即最后的。
舉例：
如果將a:visited放在最后幔翰，當(dāng)鏈接被訪問過以后顽决，那么a:active和a:hover的顏色設(shè)置就不會顯示出來，因為已經(jīng)滿足了visited的條件导匣。其實即使鏈接沒有被訪問才菠，a:active和a:hover的顏色也不會顯示出來。
總結(jié)：將最一般的條件放在最上面贡定，并依次向下赋访，保證最下面的是最特殊的條件。這樣缓待，瀏覽器在顯示元素時蚓耽，才會從特殊到一般、逐級向上驗證條件旋炒，才會使你的每一個CSS語句都起到效果步悠。當(dāng)然，如果故意打亂順序瘫镇，也會造成一些特殊的效果鼎兽。比如，可以為鏈接制造出下劃線顏色與文字顏色的差異铣除。
未點擊鏈接前谚咬，link偽類長期處于激活狀態(tài)，鼠標(biāo)懸停（或點擊）時尚粘，a鏈接同時處于link和hover(或active)狀態(tài)择卦，由于它們特指度相同，
在同時激活的情況下郎嫁，后出現(xiàn)的偽類樣式會覆蓋前面的偽類樣式秉继，故link狀態(tài)必須寫在hover(或active)之前。
再討論hover和active的順序泽铛，若把hover放在active后面尚辑，當(dāng)點擊鏈接一瞬，實際你在激活active狀態(tài)的同時觸發(fā)了hover偽類,hover在后面覆蓋了active的顏色厚宰，所以無法看到active的顏色腌巾。故hover在active之前
其次遂填，若把visited放在hover后面，那已訪問過的鏈接一直觸發(fā)著visited偽類澈蝙，會覆蓋hover樣式吓坚。
最后，其實link灯荧、visited兩個偽類之間順序無所謂礁击。（因為它倆不可能同時觸發(fā)，即又未訪問同時又已訪問逗载。）
轉(zhuǎn)自CSS選擇器覺得這個解釋的很清楚
5.以下選擇器分別是什么意思?
#header{
} 對id為header標(biāo)簽設(shè)置樣式
.header{
} 對class為header的標(biāo)簽設(shè)置樣式
.header .logo{
} 對class為header的子元素中class為logo的標(biāo)簽設(shè)置樣式
.header.mobile{
} 對class同時包含header和mobile的標(biāo)簽設(shè)置樣式
.header p, .header h3{
} 對class為header的所有p標(biāo)簽和h3標(biāo)簽設(shè)置樣式
#header .nav>li{
} 對id為header的所有后代中哆窿，class為nav的直接子元素為li的所有標(biāo)簽設(shè)置樣式
#header a:hover{
} 對id為header的所有后代a標(biāo)簽設(shè)置hover樣式
#header .logo~p{
} 對id為header的，后代所有class為logo后面所有的p標(biāo)簽設(shè)置樣式
#header input[type="text"]{
} 對id為header的厉斟，后代所有的input中type="text"的標(biāo)簽設(shè)置樣式
6.列出你知道的偽類選擇器
經(jīng)常使用的幾個：
E:first-child 匹配作為長子（第一個子女）的元素E
E:last-child 匹配父元素的最后一個子元素挚躯，等同于:nth-last-child(1)
E:nth-child(n) 匹配其父元素的第n個子元素，第一個編號為1
E:nth-last-child(n) 匹配其父元素的倒數(shù)第n個子元素擦秽，第一個編號為1
E:first-of-type 匹配父元素下使用同種標(biāo)簽的第一個子元素码荔，等同于:nth-of-type(1)
E:last-of-type 匹配父元素下使用同種標(biāo)簽的最后一個子元素，等同于:nth-last-of-type(1)
E:nth-of-type(n) 與:nth-child()作用類似感挥，但是僅匹配使用同種標(biāo)簽的元素
E:nth-last-of-type(n) 與:nth-last-child() 作用類似缩搅，但是僅匹配使用同種標(biāo)簽的元素
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的標(biāo)簽 - div :first-child
div元素下的第一個子元素 - div :first-of-type
div元素下所有的同類型的第一個元素
8.運(yùn)行如下代碼，解析下輸出樣式的原因
<style>
.item1:first-child{
color: red;
} id為item1的父元素下的第一個子元素置谦，即p堂鲤，因此aa變紅
.item1:first-of-type{
background: blue;
} id為item1的父元素下每種類型的第一個子元素，即第一個p和第一個h3霉祸，因此aa筑累，bb背景變藍(lán)
</style>
<div class="ct">
<p class="item1">aa</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
