class 和 id 的使用場景?
id:id選擇器,使用#name命名，一個(gè)標(biāo)簽只能有一個(gè)id且每個(gè)id只能使用一次贯要，多用于頁面分塊的塊級(jí)標(biāo)簽上鼠渺； #content{css樣式} <div id="content"></div> 權(quán)限高，慎用
class:類選擇器 使用.name命名意敛，一個(gè)標(biāo)簽可以有多個(gè)類且同一個(gè)類可以用到不同的標(biāo)簽上，多用于多個(gè)標(biāo)簽樣式相似或完全相同時(shí)膛虫； .content {css樣式} <div class="content"></div>
CSS選擇器常見的有幾種?
- 基礎(chǔ)選擇器
*通用選擇器,匹配頁面任意元素
#idid選擇器,匹配特定id的元素
.class類選擇器,匹配class包含(不是等于)特定類的元素
element標(biāo)簽選擇器 - 組合選擇器
E,F 多元素選擇器草姻，用,分隔，同時(shí)匹配元素E或元素F
E F 后代選擇器稍刀，用空格分隔撩独，匹配E元素所有的后代（不只是子元素、子元素向下遞歸）元素F
E>F 子元素選擇器账月，用>分隔综膀，匹配E元素的所有直接子元素
E+F 直接相鄰選擇器，匹配E元素之后的相鄰的同級(jí)元素F
E~F 普通相鄰選擇器（弟弟選擇器）局齿，匹配E元素之后的同級(jí)元素F（無論直接相鄰與否）
.class1.class2 id和class選擇器和選擇器連寫的時(shí)候中間沒有分隔符僧须，. 和 # 本身充當(dāng)分隔符的元素
element#id id和class選擇器和選擇器連寫的時(shí)候中間沒有分隔符，. 和 # 本身充當(dāng)分隔符的元素 - 屬性選擇器
E[attr] 匹配所有具有屬性attr的元素项炼，div[id]就能取到所有有id屬性的div
E[attr = value] 匹配屬性attr值為value的元素担平，div[id=test],匹配id=test的div
E[attr ~= value] 匹配所有屬性attr具有多個(gè)空格分隔、其中一個(gè)值等于value的元素
E[attr ^= value] 匹配屬性attr的值以value開頭的元素
E[attr $= value] 匹配屬性attr的值以value結(jié)尾的元素
E[attr *= value] 匹配屬性attr的值包含value的元素 - 偽類選擇器
E:first-child 匹配作為長子（第一個(gè)子女）的元素E
E:link 匹配所有未被點(diǎn)擊的鏈接
E:visited 匹配所有已被點(diǎn)擊的鏈接
E:active 匹配鼠標(biāo)已經(jīng)其上按下锭部、還沒有釋放的E元素
E:hover 匹配鼠標(biāo)懸停其上的E元素
E:focus 匹配獲得當(dāng)前焦點(diǎn)的E元素
E:lang(c) 匹配lang屬性等于c的E元素
E:enabled 匹配表單中可用的元素
E:disabled 匹配表單中禁用的元素
E:checked 匹配表單中被選中的radio或checkbox元素
E::selection 匹配用戶當(dāng)前選中的元素
E:root 匹配文檔的根元素暂论，對(duì)于HTML文檔，就是HTML元素
E:nth-child(n) 匹配其父元素的第n個(gè)子元素拌禾，第一個(gè)編號(hào)為1
E:nth-last-child(n) 匹配其父元素的倒數(shù)第n個(gè)子元素取胎，第一個(gè)編號(hào)為1
E:nth-of-type(n) 與:nth-child()作用類似，但是僅匹配使用同種標(biāo)簽的元素
E:nth-last-of-type(n) 與:nth-last-child() 作用類似湃窍，但是僅匹配使用同種標(biāo)簽的元素
E:last-child 匹配父元素的最后一個(gè)子元素闻蛀，等同于:nth-last-child(1)
E:first-of-type 匹配父元素下使用同種標(biāo)簽的第一個(gè)子元素，等同于:nth-of-type(1)
E:last-of-type 匹配父元素下使用同種標(biāo)簽的最后一個(gè)子元素您市，等同于:nth-last-of-type(1) - 偽元素選擇器
E::first-line 匹配E元素內(nèi)容的第一行
E::first-letter 匹配E元素內(nèi)容的第一個(gè)字母
E::before 在E元素之前插入生成的內(nèi)容
E::after 在E元素之后插入生成的內(nèi)容
選擇器的優(yōu)先級(jí)是怎樣的?
- 在屬性后面使用 !important 會(huì)覆蓋頁面內(nèi)任何位置定義的元素樣式
- 作為style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式
- id選擇器
- 類選擇器
- 偽類選擇器
- 屬性選擇器
- 標(biāo)簽選擇器
- 通配符選擇器
- 瀏覽器自定義
對(duì)于復(fù)雜場景如何計(jì)算優(yōu)先級(jí)觉痛？
行內(nèi)樣式 <div style="xxx"></div> ==> a
ID 選擇器 ==> b
類，屬性選擇器和偽類選擇器 ==> c
標(biāo)簽選擇器茵休、偽元素 ==> d
#ct .box p {} /* a=0 b=1 c=1 d=1 -> 0,1,1,1 /
div#header:after {} / a=0 b=1 c=0 d=2 -> 0,1,0,2 */
a:link, a:hover, a:active, a:visited 的順序是怎樣的薪棒？ 為什么？
a:link榕莺，定義正常鏈接的樣式俐芯；
a:visited，定義已訪問過鏈接的樣式钉鸯；
a:hover吧史，定義鼠標(biāo)懸浮在鏈接上時(shí)的樣式；
a:active唠雕，定義鼠標(biāo)點(diǎn)擊鏈接時(shí)的樣式贸营。
沒有規(guī)矩不成方圓吨述，雖然鏈接定義寫好了，但它也是有規(guī)則的莽使，如果這四項(xiàng)的書寫順序稍有差錯(cuò)锐极，鏈接的效果可能就沒有了笙僚，所以每次定義鏈接樣式時(shí)務(wù)必確認(rèn)定義的順序芳肌，link--visited--hover-active，也就是我們常說到的LoVe HAte原則（大寫字母就是它們的首字母）肋层。
以下選擇器分別是什么意思?
#header{} 匹配id為header的元素
.header{} 匹配類為header的元素
.header .logo{} 匹配類為header的子元素的類為logo的元素
.header.mobile{} 匹配同時(shí)具有class名為header和class名為mobile的元素
.header p, .header h3{} 組合選擇器,匹配類為header的子元素的標(biāo)簽為p的元素和類為header的兒子元素的標(biāo)簽為h3的元素
#header .nav>li{} 匹配id為header的子元素的類為nav的所有直接子元素是標(biāo)簽li的元素
#header a:hover{} 匹配id為header的子元素是標(biāo)簽a的偽類選擇器hover的元素
#header .logo~p{} 匹配id為header的子元素的類logo的普通相鄰為標(biāo)簽p的元素
#header input[type="text"]{} 匹配id為header的標(biāo)簽是input的屬性type=text的元素
列出你知道的偽類選擇器
a:link亿笤，定義正常鏈接的樣式；
a:visited栋猖，定義已訪問過鏈接的樣式净薛；
a:hover，定義鼠標(biāo)懸浮在鏈接上時(shí)的樣式蒲拉；
a:active肃拜，定義鼠標(biāo)點(diǎn)擊鏈接時(shí)的樣式。
div:first-child雌团、div:first-of-type燃领、div :first-child和div :first-of-type的作用和區(qū)別
div:first-child 匹配其同級(jí)元素的第一個(gè)子元素是否為div
div:first-of-type 匹配其同級(jí)元素下的第一個(gè)子元素類型是否為div,因?yàn)轭愋蜑閐iv所以效果和第一個(gè)一樣
div :first-child 匹配div后代的第一個(gè)子元素
div :first-of-type 匹配div后代的同種類型的第一個(gè)子類型
運(yùn)行如下代碼，解析下輸出樣式的原因锦援。
<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>
:first-child 命名item1的類的父類的第一個(gè)子元素是紅色,所以p標(biāo)簽的字是紅色
:first-of-type 匹配父元素下使用同種標(biāo)簽的第一個(gè)子元素,所以類父類下類為itme1的有p和第一個(gè)h3
