1.class 和 id 的使用場景?
- id的使用場景: id只能被使用一次膊存，在頁面分段等場景下可以使用急膀。
- class的使用場景: class可以多次使用肋殴，用來給不同的元素設(shè)置相同的樣式谎替。
2.CSS選擇器常見的有幾種?
1.基礎(chǔ)選擇器
包含通配符選擇器抛计，標(biāo)簽選擇器床嫌，類選擇器跨释，id選擇器。
2.組合選擇器
包含:
- 多元素選擇器(a,b):用,分隔厌处，同時(shí)匹配元素E或元素F
- 后代選擇器(e f):用空格分隔鳖谈，匹配E元素所有的后代元素F(全部)
- 子元素選擇器(e>f):用>分隔，匹配E元素的所有直接子元素(下一級)
- 直接相鄰選擇器(e+f): 匹配E元素之后的相鄰的同級元素F(不改變+號前面e的樣式)
- 普通相鄰選擇器(e~f): 匹配E元素之后的全部同級元素F
3.屬性選擇器
- E[attr]:匹配所有具有屬性attr的元素阔涉，div[id]就能取到所有有id屬性的div
- E[attr = value]:匹配屬性attr值為value的元素(div[id=test] 匹配id=test的div)
4.偽類選擇器
- E:hover/link/active/visited:給元素在某個(gè)狀態(tài)下添加樣式
- E:nth-child(n):選中第n個(gè)子元素
- E:first-child 選取作為父元素第一個(gè)子元素的E元素(F E:first-child)
- E:last-child:選取作為父元素最后一個(gè)個(gè)子元素的E元素
- E:nth-of-type(n):與:nth-child(n)作用類似蚯姆，但是僅匹配使用同種標(biāo)簽的元素(與E相同的子元素)
- E:enabled/disabled : 選取表單中可用/禁用的元素
5.偽元素選擇器
- E::before : 在E元素之前插入生成的內(nèi)容
- E::after : 在E元素之后插入生成的內(nèi)容
3.選擇器的優(yōu)先級是怎樣的?對于復(fù)雜場景如何計(jì)算優(yōu)先級？
CSS優(yōu)先級從高到低分別是:
在屬性后面使用 !important > 內(nèi)聯(lián)樣式 > id選擇器 > 類選擇器 > 偽類選擇器 > 屬性選擇器 >標(biāo)簽選擇器 > 通配符選擇器 > 瀏覽器自定義
在復(fù)雜場景下先計(jì)算優(yōu)先級最高的元素的個(gè)數(shù),個(gè)數(shù)多優(yōu)先級高,若相同則比較優(yōu)先級第二高的,以此類推.
4.a:link, a:hover, a:active, a:visited 的順序是怎樣的洒敏？ 為什么龄恋？
a:link最先，然后是a:visited.之后是a:hover,最后是a:active.
寫在后面的樣式會(huì)覆蓋寫在前面的樣式,對于a:link,如果放在后面則會(huì)覆蓋掉放在前面的樣式,所以應(yīng)該放在最前面凶伙。a:visited生效時(shí)應(yīng)該覆蓋掉a:link又不影響到其它兩個(gè)郭毕，所以放在a:link的后面。a:active必須要鼠標(biāo)放在元素上才能生效函荣，而這會(huì)先調(diào)用a:hover的樣式显押，所以a:active需要放在a:hover的后面，否則會(huì)被a:hover覆蓋掉傻挂。(生效范圍小的放在后面)
5.以下選擇器分別是什么意思?
- #header : 選擇id為header的元素
- .header : 選擇類為header的元素
- .header .logo : 選擇header類中的logo類中的元素
- .header.mobile : 選擇類名中既有header又有mobile的元素
- .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類之后與logo類同級的p元素(不包括logo類和logo類之前的元素)
- #header input[type="text"] : id為header下的input的type為text的元素
6.列出你知道的偽類選擇器
見2
7.div:first-child乘碑、div:first-of-type、div :first-child和div :first-of-type的作用和區(qū)別 （注意空格的作用）
div:first-child : 選擇其父元素中既是第一個(gè)又是標(biāo)簽為div的子元素(不滿足就不選)
div :first-child : 選擇每個(gè)div中的第一個(gè)元素
div:first-of-type: 選擇其父元素中的第一個(gè)div元素
div :first-of-type : 選擇每個(gè)div下第一次出現(xiàn)的標(biāo)簽
8.運(yùn)行如下代碼金拒，解析下輸出樣式的原因兽肤。
.item1:first-child改變div下第一個(gè)元素的樣式套腹，所以aa變紅了。
.item1:first-of-type改變div下第一次出現(xiàn)的標(biāo)簽的樣式资铡，所以第一個(gè)p所在的第一行和第一個(gè)h3所在的第二行背景色變藍(lán)了电禀。
