一.class 和 id 的使用場景?
- name：指定標簽的名稱
應用場景：
①form表單：name可作為傳遞給服務器表單列表的變量名；如傳到服務器的名稱為：username="name值"。
②input type="radio"單選標簽：把幾個單選標簽的 name設為一個相同值時祭陷，將會進行單選操作绳匀。
<input type="radio" name="sex"/>男
<input type="radio" name="sex"/>女
③快速獲取一組name相同的標簽：獲取擁有相同name的標簽询枚，一起進行操作台舱，如:更改屬性涧偷、注冊事件等尚骄。
function changtxtcolor() {
var txts = document.getElementsByName('txtcolor'); //獲取所有name=txtcolor 的標簽
for (var i = 0; i < txts.length; i++) { //循環(huán)遍歷標簽块差，并把背景色改為red
txts[i].style.backgroundColor = "red";
}
} - id：指定標簽的唯一標識
應用場景：
①根據(jù)提供的唯一id號，快速獲取標簽對象倔丈。如：document.getElementById("id值")
②用于充當label標簽for屬性的值：示例：<label for='userid'>用戶名：</label>憨闰，表示單擊此label標簽時，id為userId的標簽獲得焦點乃沙。
二.CSS選擇器常見的有幾種?
基礎選擇器
* 通用元素選擇器起趾，匹配頁面任何元素
#id id選擇器，匹配特定id的元素
.class 類選擇器警儒，匹配class包含特定類的元素
element 標簽選擇器
組合選擇器
E,F 多元素選擇器训裆，同時匹配元素E和F
E F 后代選擇器，空格分割蜀铲，匹配E元素所有的后代（不只是子元素边琉，而且包括子元素向下遞歸）元素F
E>F 子元素選擇器，匹配E元素的直接子元素F（不遞歸）
E+F 直接相鄰選擇器记劝，匹配E元素之后的相鄰的同級元素F
E~F 普通相鄰選擇器变姨，匹配E元素之后的同級元素F（無論是否直接相鄰）
屬性選擇器
E[attr] 用于選取帶有指定屬性的元素
E[attr=value] 用于選取帶有指定屬性和值的元素
E[attribute~=value] 用于選取屬性值中包含指定詞匯的元素
E[attribute|=value] 用于選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞
E[attribute^=value] 匹配屬性值以指定值開頭的每個元素
E[attribute$=value] 匹配屬性值以指定值結(jié)尾的每個元素
E[attribute*=value] 匹配屬性值中包含指定值的每個元素厌丑。
偽類選擇器
E:first-child 匹配元素E的第一個子元素
E:nth-last-child 匹配其父元素的第n個子元素定欧，第一個編號為1
E:nth-of-type(n) 與:nth-child作用類似，但是僅匹配使用同種標簽的元素
E:nth-last-of-type(n) 與 nth-last-child作用相似怒竿，但是僅匹配使用同種標簽的元素
E:first-child 匹配父元素的第一個子元素
E:last-child 匹配父元素的最后一個子元素
E:active 匹配鼠標已經(jīng)在其上按下砍鸠，但是還沒有釋放的E元素
E:hover 匹配鼠標懸停其上的E元素
偽元素選擇器
E::before 在E元素之前插入生成的內(nèi)容，配合content來輸入要插入的內(nèi)容
E::after 在E元素之后插入生成的內(nèi)容
三.選擇器的優(yōu)先級是怎樣的?對于復雜場景如何計算優(yōu)先級耕驰？
當兩個規(guī)則都作用到了同一個html元素上時爷辱，如果定義的屬性有沖突，那么應該用誰的值的，CSS有一套優(yōu)先級的定義饭弓。
不同級別
1.在屬性后面使用 !important 會覆蓋頁面內(nèi)任何位置定義的元素樣式双饥。
2.作為style屬性寫在元素內(nèi)的樣式
3.id選擇器
4.類選擇器
5.標簽選擇器
6.通配符選擇器
7.瀏覽器自定義或繼承
總結(jié)排序：!important > 行內(nèi)樣式>ID選擇器 > 類選擇器 > 標簽 > 通配符 > 繼承 > 瀏覽器默認屬性
同一級別
同一級別中后寫的會覆蓋先寫的樣式。
復雜場景計算優(yōu)先級
CSS的選擇器是有權重的弟断，當不同選擇器的樣式設置有沖突時咏花，會采用權重高的選擇器設置樣式。權重（即優(yōu)先級）的規(guī)則如下夫嗓，權重越高迟螺，優(yōu)先級越高：
同一個元素可以使用多個規(guī)則來指定它的同一樣式（比如字體顏色）冲秽，每個規(guī)則都有自己的選擇器舍咖。顯然最終只有一個規(guī)則起作用（不可能一個字既是紅色又是綠色），那么該規(guī)則的特殊性最高锉桑，特殊性即css優(yōu)先級排霉。很多人僅僅知道選擇器優(yōu)先級：ID>class>元素選擇器，而不知道ID的優(yōu)先級為什么大于class的優(yōu)先級民轴。那么css優(yōu)先級到底是怎么計算的呢攻柠？
選擇器的特殊性值表述為4個部分，用0,0,0,0表示：
行間樣式后裸，加1,0,0,0.
ID選擇器的特殊性值瑰钮，加0,1,0,0。
類選擇器微驶、屬性選擇器或偽類浪谴，加0,0,1,0。
元素和偽元素因苹，加0,0,0,1苟耻。
通配選擇器*對特殊性沒有貢獻，即0,0,0,0扶檐。
最后比較特殊的一個標志!important（權重）凶杖，它沒有特殊性值，但它的優(yōu)先級是最高的款筑，為了方便記憶智蝠，可以認為它的特殊性值為1,0,0,0,0。
選擇器特殊性值是從左向右排序的奈梳，特殊性值1,0,0,0大于以0開頭的所有特殊性值杈湾，即便它是0,99,99,99，優(yōu)先級依然比1,0,0,0要低颈嚼。
四.a:link, a:hover, a:active, a:visited 的順序是怎樣的毛秘？ 為什么？
很多人都知道a標簽有四種狀態(tài)：鏈接訪問前、鏈接訪問后叫挟、鼠標滑過艰匙、激活，分別對應四種偽類:link抹恳、:visited员凝、:hover、:active奋献，并且這四個偽類如果對同一個元素設置同一個屬性健霹，那它們的聲明順序還有一定要求，一般大家都遵循“愛恨原則LVHA”（LoVe HAte）瓶蚂，為什么是這個順序糖埋？不能是其它順序嗎？
根據(jù)css優(yōu)先級計算規(guī)則窃这，偽類的特殊性值是0,0,1,0瞳别，4個偽類的特殊性值相同，那么后面聲明的規(guī)則優(yōu)先級高杭攻。當鼠標滑過a鏈接時祟敛，滿足:link和:hover兩個偽類，要改變a標簽的顏色兆解，就必須將:hover偽類在:link偽類后面聲明馆铁；同理，當鼠標點擊激活a鏈接時锅睛，同時滿足:link埠巨、:hover、:active三種狀態(tài)衣撬，要顯示a標簽激活時的樣式（:active）乖订，必須將:active聲明放到:link和:hover之后。因此得出LVHA這個順序具练。這個順序能不能變乍构？可以，但也只有:link和:visited可以交換位置扛点，因為一個鏈接要么訪問過要么沒訪問過哥遮，不可能同時滿足，也就不存在覆蓋的問題陵究。
五.以下選擇器分別是什么意思?
#header { } //id為"header"的元素
.header //類名為"header"的元素
.header .logo { } //類名為"header"的元素后代中類名為"logo"的元素
.header.mobile //類名同時為"header"和"moblie"的元素
.header p, .header h3 //類名為"header"的后代元素中的p標簽和h3標簽
#header .nav>li //id為"header"的元素后代類名為"nav"的元素的直接子元素li標簽
#header a:hover ///id為"header"的元素后代中在hover狀態(tài)下的a元素
#header .logo~p //id為"header"的元素后代類名為"logo"的元素的后面所有同級標簽為p的元素
#header input[type="text"] //id為"header"的元素后代中屬性為"type="text"的input的標簽
列出你知道的偽類選擇器
E:first-child 匹配元素E的第一個子元素
E:nth-last-child 匹配其父元素的第n個子元素眠饮，第一個編號為1
E:nth-of-type(n) 與:nth-child作用類似，但是僅匹配使用同種標簽的元素
E:nth-last-of-type(n) 與 nth-last-child作用相似铜邮，但是僅匹配使用同種標簽的元素
E:first-child 匹配父元素的第一個子元素
E:last-child 匹配父元素的最后一個子元素
E:active 匹配鼠標已經(jīng)在其上按下仪召，但是還沒有釋放的E元素
E:hover 匹配鼠標懸停其上的E元素
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父元素下的第一個同類型元素
運行如下代碼扔茅，解析下輸出樣式的原因已旧。
