1 class 和 id 的使用場(chǎng)景
class 用來(lái)標(biāo)識(shí)一類(lèi)標(biāo)簽，即擁有相同屬性的標(biāo)簽仪缸。
id是用來(lái)標(biāo)識(shí)唯一性遗菠。全局唯一。
2 CSS常見(jiàn)選擇器
常見(jiàn)的選擇其主要分為5種：
- 基本選擇器
| 選擇器 | 含義 |
|---|---|
| * | 通用元素選擇器,匹配頁(yè)面上的任何元素 |
| #id | id選擇器,匹配id元素 |
| .class | 類(lèi)選擇器,匹配class元素也包括class內(nèi)部的子元素 |
| element | 標(biāo)簽選擇器 |
舉例說(shuō)明：
- 組合選擇器
E和F表示基本
| 選擇器 | 含義 |
| --------- | ------ |
| E,F | 多元素選擇器烘豌，用,分隔载庭，同時(shí)匹配元素E或元素F |
| E F | 后代選擇器，用空格分隔廊佩，匹配E元素所有的后代（不只是子元素囚聚、子元素向下遞歸）元素F |
| E>F | 子元素選擇器，用>分隔标锄，匹配E元素的所有直接子元素 |
| E+F | 直接相鄰選擇器顽铸，匹配E元素之后的相鄰的同級(jí)元素F |
| E~F | 普通相鄰選擇器（弟弟選擇器），匹配E元素之后的同級(jí)元素F（無(wú)論直接相鄰與否） |
| .class1.class2 | id和class選擇器和選擇器連寫(xiě)的時(shí)候中間沒(méi)有分隔符料皇，. 和 # 本身充當(dāng)分隔符的元素 |
| element#id | id和class選擇器和選擇器連寫(xiě)的時(shí)候中間沒(méi)有分隔符谓松，. 和 # 本身充當(dāng)分隔符的元素 |
- 類(lèi)型選擇器
| 選擇器 | 含義 |
|---|---|
| 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開(kāi)頭的元素 |
| E[attr $= value] | 匹配屬性attr的值以value結(jié)尾的元素 |
| E[attr *= value] | 匹配屬性attr的值包含value的元素 |
- 偽類(lèi)選擇器
| 選擇器 | 含義 |
|---|---|
| E:first-child | 匹配作為長(zhǎng)子（第一個(gè)子女）的元素E |
| E:link | 匹配所有未被點(diǎn)擊的鏈接 |
| E:visited | 匹配所有已被點(diǎn)擊的鏈接 |
| E:active | 匹配鼠標(biāo)已經(jīng)其上按下、還沒(méi)有釋放的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 | 匹配用戶(hù)當(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()作用類(lèi)似盆赤，但是僅匹配使用同種標(biāo)簽的元素 |
| E:nth-last-of-type(n) | 與:nth-last-child() 作用類(lèi)似，但是僅匹配使用同種標(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:only-child | 匹配父元素下僅有的一個(gè)子元素汗捡，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1) |
| E:only-of-type | 匹配父元素下使用同種標(biāo)簽的唯一一個(gè)子元素淑际，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1) |
| E:empty | 匹配一個(gè)不包含任何子元素的元素，文本節(jié)點(diǎn)也被看作子元素 |
| E:not(selector) | 匹配不符合當(dāng)前選擇器的任何元素 |
- 偽元素選擇器
| 選擇器 | 含義 |
|---|---|
| E::first-line | 匹配E元素內(nèi)容的第一行 |
| E::first-letter | 匹配E元素內(nèi)容的第一個(gè)字母 |
| E::before | 在E元素之前插入生成的內(nèi)容 |
| E::after | 在E元素之后插入生成的內(nèi)容 |
3 選擇器的優(yōu)先級(jí)
優(yōu)先級(jí)的作用是決定當(dāng)做個(gè)樣式修飾了同一個(gè)元素時(shí)扇住，優(yōu)先使用哪一個(gè)春缕。優(yōu)先級(jí)如下：
- 在屬性后面使用 !important 會(huì)覆蓋頁(yè)面內(nèi)任何位置定義的元素樣式
- 作為style屬性寫(xiě)在元素標(biāo)簽上的內(nèi)聯(lián)樣式
- id選擇器
- 類(lèi)選擇器
- 偽類(lèi)選擇器
- 屬性選擇器
- 標(biāo)簽選擇器
- 通配符選擇器
- 瀏覽器自定義
4 對(duì)于復(fù)雜場(chǎng)景如何計(jì)算優(yōu)先級(jí)
給不同的樣式定義一個(gè)計(jì)數(shù)器，如下：
1行為樣式：即在標(biāo)簽內(nèi)部定義的樣式艘蹋，設(shè)置計(jì)數(shù)器為a,就是說(shuō)如果在樣式中存在行為樣式加給a+1锄贼；
2 ID選擇器：通過(guò)ID選擇器設(shè)置的樣式，設(shè)置計(jì)數(shù)器b,原理同上女阀；
3 類(lèi)宅荤、屬性屑迂、偽類(lèi)選擇器：設(shè)置計(jì)數(shù)器為c，原理同上
4 標(biāo)簽選擇器：設(shè)置計(jì)數(shù)d,原理同上冯键；
eg:
1 #cnt .px p { }/* a(0),b(1),c(1),d(1)/
上面的代碼惹盼，存在一個(gè)id選擇器（b+1）,存在一個(gè)類(lèi)選擇器(c+1),存在一個(gè)標(biāo)簽選擇器(d+1).
2 <div style="xxx"></div>/a(1),b(0),c(0),d(0)
這樣計(jì)算完以后從優(yōu)先級(jí)最高的a開(kāi)始比較，a相同計(jì)較b依次類(lèi)推惫确，得出結(jié)論第二段代碼的優(yōu)先級(jí)高于第一段手报。
5 a:link, a:hover, a:active, a:visited 的順序
順序：a:link > a:visited > a:hover > a:active。
1“未訪問(wèn)鏈接”同時(shí)擁有a:link的樣式改化；
2鼠標(biāo)經(jīng)過(guò)時(shí)擁有a:hover的樣式掩蛤；
3鼠標(biāo)點(diǎn)擊擁有a:active的樣式；
4鼠標(biāo)釋放擁有a:visited的樣式所袁；
所以未執(zhí)行任何操作時(shí)顯示的是a:link的樣式，鼠標(biāo)經(jīng)過(guò)時(shí)需要顯示a:hover的樣式凶掰，根據(jù)優(yōu)先級(jí)后面的樣式會(huì)覆蓋前面的樣式燥爷，所以a:hover應(yīng)該在a.link的后面，點(diǎn)擊時(shí)顯示a:active的樣式所以a:active也應(yīng)該在a:link懦窘，并且應(yīng)該在a:active后面前翎。鼠標(biāo)釋放后需要顯示a:visited的樣式，但是當(dāng)鼠標(biāo)再次經(jīng)過(guò)和點(diǎn)擊時(shí)還需要具備a:hover和a:active的樣式畅涂，所以a:visited需要放置在a:hover和a:active樣式之前港华。個(gè)人認(rèn)為a:visited和a:link可以互換。所以順序如上午衰。
6 div:first-child立宜、div:first-of-type、div :first-child和div :first-of-type的作用和區(qū)別
