1.class 和 id 的使用場景?
- class：類選擇器蒋搜，一個標簽可以有多個類且同一個類可以用到不同的標簽上览露，多用于多個標簽樣式相似或完全相同時醋寝；用于將一類元素的樣式抽取出來口糕；
- id選擇器缅阳，其優(yōu)先級高于類選擇器，一個標簽只能有一個id且每個id只能使用一次景描，多用于頁面分塊的塊級標簽上十办；用于控制單個元素的樣式；
2.CSS選擇器常見的有幾種?
1.基礎(chǔ)選擇器：
- *：通用元素選擇器超棺，匹配頁面上所有元素 * {}
- #id：id選擇器向族，匹配特定id的元素 #id {}
- .class：類選擇器，匹配class包含（不是等于）特定類的元素 .class {}
- element：標簽選擇器 p {}
2.組合選擇器：
- E,F：多元素選擇器棠绘，同時選中E和F選擇器件相，一般分行寫不同并列元素 .p1,.p2 {}
- E F：后代選擇器再扭，匹配E元素所有的后代F元素，不僅包括子元素夜矗，還包括子元素向下遞歸 #id.p1 {}
- E>F：子元素選擇器泛范，匹配E元素的所有直接子元素F元素 #id>.p1 {}
- E+F：直接相鄰選擇器，匹配E元素之后的相鄰的同級元素F元素 .p1+p {}
- E~F：普通相鄰選擇器（弟弟選擇器）紊撕，匹配E元素之后的所有同級元素F罢荡，無論是否相鄰 .p1~p {}
- .class1.class2：同時擁有兩個id或class屬性的元素;id和class選擇器連寫的時候中間沒有分隔符，沒有空格对扶，.和#本身充當分隔符號的元素
- element#id：同時擁有兩個id或class屬性的元素;id和class選擇器連寫的時候中間沒有分隔符区赵，沒有空格，.和#本身充當分隔符號的元素
3.屬性選擇器：
- E[Attr]：匹配所有具有屬性Attr的元素 div[id] {} a[href][title] {color:red;}
- E[Attr=value]：匹配所有屬性Attr等于value的元素 input[type=password] {}
- E[Attr~=value]：匹配所有屬性Attr具有多個空格分隔浪南、其中一個等于value的元素
- E[Attr^=value]：匹配所有屬性Attr的值以value開頭的元素
- E[Attr$=value]：匹配所有屬性Attr的值以value結(jié)尾的元素
- E[Attr*=value]：匹配所有屬性Attr的值包含value的元素
4.偽類選擇器：
- a標簽：
a:link{}：匹配所有未被點擊的鏈接笼才；
a:visited{}：匹配所有已被點擊的鏈接；
a:active{}：匹配鼠標已經(jīng)按下逞泄，還沒有釋放的鏈接患整；
a:hover{}：匹配鼠標懸停其上的鏈接； - E:focus：匹配獲得當前焦點的E元素喷众；
- E:lang(c)：匹配lang屬性等于c的E元素各谚；
- E:enabled：匹配表單中可用的元素；
- E:disabled：匹配表單中禁用的元素到千；
- E:checked：匹配表單中被選中的radio或checkbox元素昌渤；
- E::selection：匹配用戶當前選中的元素；
- E:first-child：匹配作為長子（第一個子女）的元素E憔四；
- E:root：匹配文檔的根元素膀息，對于HTML文檔，就是HTML元素了赵；
- E:nth-child(n)：匹配其父元素的第n個子元素潜支，第一個編號為1；
- E:nth-last-child(n)：匹配其父元素的倒數(shù)第n個子元素柿汛，第一個編號為1冗酿；
- E:nth-of-type(n)：與E:nth-child(n)作用類似，但是僅匹配使用同種標簽的元素络断；
- E:nth-last-of-type(n)：與E:nth-last-child(n)作用類似裁替，但是僅匹配使用同種標簽的元素；
- E:last-child：匹配父元素的最后一個子元素貌笨，等同于：E:nth-last-child(1)弱判；
- E:first-of-type：匹配父元素下使用同種標簽的第一個子元素，等同于：E:nth-of-type(1)锥惋；
- E:last-of-type：匹配父元素下使用同種標簽的最后一個子元素昌腰，等同于：E:nth-last-of-type(1)开伏；
- E:only-child：匹配父元素下僅有的一個子元素；
- E:only-of-type：匹配父元素下使用同種標簽的唯一一個子元素剥哑；
5.偽元素選擇器：
- E::first-line：匹配E元素內(nèi)容的第1行硅则；
- E::first-letter：匹配E元素內(nèi)容的第1個字母；
- E::before：在E元素之前插入生成的內(nèi)容株婴；
- E::after：在E元素之后插入生成的內(nèi)容怎虫；
3.選擇器的優(yōu)先級是怎樣的?對于復(fù)雜場景如何計算優(yōu)先級?
從高到低依次為：
- 在屬性后使用!important會覆蓋頁面內(nèi)任何位置定義的元素樣式；color: red!important;
- 作為style屬性寫在元素標簽上的內(nèi)聯(lián)樣式困介；
- id選擇器大审；
- 類選擇器；
- 偽類選擇器座哩；
- 屬性選擇器徒扶；
- 標簽選擇器；
- 通配符選擇器根穷；給當前界面上所有的標簽設(shè)置屬性 *{}
- 瀏覽器自定義姜骡；
復(fù)雜場景：
對于構(gòu)成復(fù)雜的選擇器，首先計算以下4類選擇器的個數(shù)屿良，分別等于以下值a b c d：
- 行內(nèi)樣式：<div style=""></div> ==>a
- id選擇器：==b
- 類圈澈、屬性選擇器和偽類選擇器：==>c
- 標簽選擇器、偽元素：==>d
在對比兩個選擇器的優(yōu)先級時尘惧，先對比a的值康栈，a大的選擇器優(yōu)先級較高，如果a相等喷橙，再對比b的值啥么，b大的優(yōu)先級較高，以此類推……
4.a:link, a:hover, a:active, a:visited 的順序是怎樣的贰逾？ 為什么悬荣？
a:link{
color:red;
}
a:visited{
color:green;
}
a:hover{
color:blue;
}
a:active{
color:yellow;
}
4個選擇器有相同的優(yōu)先級，如果將a:visited放在最后疙剑，則訪問過之后永久生效隅熙，將會把另外3個的樣式永久覆蓋掉，而我們只需要讓它把原a:link的樣式覆蓋掉即可核芽，所以要將a:visited排在a:link之后；當鼠標點擊link的時候酵熙，4個選擇器都將生效轧简，如果將a:hover放在最后，則會覆蓋掉a:active的樣式匾二，所以要將a:active放在a:hover之后哮独。
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標簽元素，以及class包含header的后代h3標簽元素
#header .nav>li{
}——id為header的元素后代中皮璧，class包含nav的元素的直接li標簽子元素
#header a:hover{
}——id為header的元素后代中舟扎，處于鼠標懸停狀態(tài)的a標簽元素
#header .logo~p{
}——id為header的元素后代中，class包含logo的元素的所有同級p標簽元素
#header input[type="text"]{
}——id為header的元素后代中悴务，type屬性值為text的input標簽元素
6.列出你知道的偽類選擇器
- a標簽：
a:link{}：匹配所有未被點擊的鏈接睹限；
a:visited{}：匹配所有已被點擊的鏈接；
a:active{}：匹配鼠標已經(jīng)按下讯檐，還沒有釋放的鏈接羡疗；
a:hover{}：匹配鼠標懸停其上的鏈接； - E:focus：匹配獲得當前焦點的E元素别洪；
- E:lang(c)：匹配lang屬性等于c的E元素叨恨；
- E:enabled：匹配表單中可用的元素；
- E:disabled：匹配表單中禁用的元素挖垛；
- E:checked：匹配表單中被選中的radio或checkbox元素痒钝；
- E::selection：匹配用戶當前選中的元素；
- E:first-child：匹配E元素的父元素的第一個子元素（第一個子元素須為E標簽才會選中）痢毒；
- E:root：匹配文檔的根元素送矩，對于HTML文檔，就是HTML元素闸准；
- E:nth-child(n)：匹配其父元素的第n個子元素益愈，第一個編號為1；
- E:nth-last-child(n)：匹配其父元素的倒數(shù)第n個子元素夷家，第一個編號為1蒸其；
- E:nth-of-type(n)：與E:nth-child(n)作用類似，但是僅匹配使用同種標簽的元素库快；
- E:nth-last-of-type(n)：與E:nth-last-child(n)作用類似摸袁，但是僅匹配使用同種標簽的元素；
- E:last-child：匹配父元素的最后一個子元素义屏，等同于：E:nth-last-child(1)靠汁；
- E:first-of-type：匹配元素E的父元素下使用相同標簽的第一個子元素，等同于：E:nth-of-type(1)闽铐；
- E:last-of-type：匹配父元素下使用同種標簽的最后一個子元素蝶怔，等同于：E:nth-last-of-type(1)；
- E:only-child：匹配父元素下僅有的一個子元素兄墅；
- E:only-of-type：匹配父元素下使用同種標簽的唯一一個子元素踢星；
7.div:first-child、div:first-of-type隙咸、div :first-child和div :first-of-type的作用和區(qū)別 （注意空格的作用）
- div:first-child匹配作為div父元素長子的div元素（既是長子沐悦，又是div）
- div:first-of-type匹配div父元素的第一個div元素（可以是父元素的第n個元素）
- div :first-child相當于div *:first-child成洗，匹配div元素的第一個子元素（無論是不是div）
- div :first-of-type相當于 div *:first-of-type，匹配div子元素中的同類型元素的第一個元素（無論是不是div元素）
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>
.item1:first-child選擇器匹配.item1父元素下作為長子的.item1元素瓶殃，即<p class="item1">aa</p>，所以文字aa變紅色副签；.item1:first-of-type選擇器匹配.item1的父元素下?lián)碛邢嗤瑯撕灥牡谝粋€.item1元素遥椿，即使用p標簽的第一個.item1元素<p class="item1">aa</p>，和使用h3標簽的第一個.item1元素<h3 class="item1">bb</h3>继薛，所以文字aa和bb的底色變藍色修壕。
