class 和 id 的使用場景?
class屬性：
指定標(biāo)簽的類名，CSS操作中，把一些特定的樣式放到一個(gè)類中，需要此樣式的標(biāo)簽，可以添加此類，可以把多個(gè)類放到一個(gè)class屬性中，但必須用空格隔開來。
id屬性：
1、指定標(biāo)簽的唯一id號(hào)，快速獲取標(biāo)簽對(duì)象，如：document.getElementById(id);
2、用于充當(dāng)label標(biāo)簽for屬性的值。
3、CSS中，用于對(duì)應(yīng)的id選擇器 #id名{xxx：xxx}。
CSS選擇器常見的有幾種?
基礎(chǔ)選擇器
1、*{ }：通用元素選擇器，匹配頁面任何元素（這也就決定了我們很少使用）
2、#id：id選擇器，匹配特定id的元素
3、.class：類選擇器，匹配class包含(不是等于)特定類的元素
4、element：標(biāo)簽選擇器，直接使用標(biāo)簽名
范例：
- {
margin: 0;
padding: 0;
}
‘#id-selector{
color: #333;
}
.class-selector{
background: #ccc;
}
p {
font-size: 20px;
}
組合選擇器：
1、E,F：多元素選擇器，用,分隔，同時(shí)匹配元素E或元素F
2、E F：后代選擇器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下遞歸）元素F
3、E>F：子元素選擇器，用>分隔，匹配E元素的所有直接子元素F
4、E+F：直接相鄰選擇器，匹配E元素之后的相鄰的同級(jí)元素F
5、E~F：普通相鄰選擇器（弟弟選擇器），匹配E元素之后的同級(jí)元素F（無論直接相鄰與否）
6、.class1.class2：id和class選擇器和選擇器連寫的時(shí)候中間沒有分隔符，. 和 # 本身充當(dāng)分隔符的元素
7、element#id：id和class選擇器和選擇器連寫的時(shí)候中間沒有分隔符，. 和 # 本身充當(dāng)分隔符的元素
范例：
1、div,p{xxx：xxx} 同時(shí)匹配div元素和p元素
2、div p{xxx：xxx}匹配div元素下的所有子元素p（包括孫元素）
3、div>p{xxx：xxx} 匹配div元素下的所有第一級(jí)子元素p（不包括孫元素）
4、h1+p{xxx：xxx} 匹配所有h1元素之后的相鄰的同級(jí)p元素
5、h1~p{xxx：xxx} 匹配h1元素之后的所有同級(jí)p元素
屬性選擇器：
1、E[attr]：匹配所有具有屬性attr的元素，div[id]就能取到所有有id屬性的div
2、E[attr = value]：匹配屬性attr值為value的元素，div[id=test],匹配id=test的div
3、E[attr ~= value]：匹配所有屬性attr具有多個(gè)空格分隔、其中一個(gè)值等于value的元素
4、E[attr ^= value]：匹配屬性attr的值以value開頭的元素
5、E[attr $= value]：匹配屬性attr的值以value結(jié)尾的元素
6、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: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)前選擇器的任何元素
注意：n的取值
1，2，3，4，5
2n+1, 2n, 4n-1
odd, even
偽元素選擇器
E::first-line 匹配E元素內(nèi)容的第一行
E::first-letter 匹配E元素內(nèi)容的第一個(gè)字母
E::before 在E元素之前插入生成的內(nèi)容
E::after 在E元素之后插入生成的內(nèi)容
CSS選擇器優(yōu)先級(jí)問題
從高到低分別是
1、在屬性后面使用 !important 會(huì)覆蓋頁面內(nèi)任何位置定義的元素樣式
2、作為style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式
3、id選擇器
4、類選擇器
5、偽類選擇器
6、屬性選擇器
7、標(biāo)簽選擇器
8、通配符選擇器
9、瀏覽器自定義
復(fù)雜場景中：
1.如果聲明來自于“style”屬性，而不是帶有選擇器的規(guī)則，則記為 1，否則記為 0 (= a)（HTML元素的style屬性也是樣式規(guī)則，因?yàn)檫@些樣式規(guī)則沒有選擇器，因此記為a=1,b=0,c=0,d=0）
2.計(jì)算選擇器中 ID 屬性的個(gè)數(shù) (= b)
3.計(jì)算選擇器中其他屬性(類、屬性選擇器)和偽類的個(gè)數(shù) (= c)
4.計(jì)算選擇器中元素名稱和偽元素的個(gè)數(shù) (= d)
四個(gè)級(jí)別分別為：行內(nèi)選擇符、ID選擇符、類別選擇符、元素選擇符。
優(yōu)先級(jí)的算法：
每個(gè)規(guī)則對(duì)應(yīng)一個(gè)初始"四位數(shù)"：0、0、0、0
若是 行內(nèi)選擇符，則加1、0、0、0
若是 ID選擇符，則加0、1、0、0
若是 類選擇符/屬性選擇符/偽類選擇符，則分別加0、0、1、0
若是 元素選擇符/偽元素選擇符，則分別加0、0、0、1
算法：將每條規(guī)則中，選擇符對(duì)應(yīng)的數(shù)相加后得到的”四位數(shù)“，從左到右進(jìn)行比較，大的優(yōu)先級(jí)越高。
需注意的：
①、!important的優(yōu)先級(jí)是最高的，但出現(xiàn)沖突時(shí)則需比較”四位數(shù)“;
②、優(yōu)先級(jí)相同時(shí)，則采用就近原則，選擇最后出現(xiàn)的樣式;
③、繼承得來的屬性，其優(yōu)先級(jí)最低;
!important > 行內(nèi)樣式>ID選擇器 > 類選擇器 > 標(biāo)簽 > 通配符 > 繼承 > 瀏覽器默認(rèn)屬性
a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么？
css中關(guān)于超鏈接的四個(gè)屬性一般正常順序?yàn)椋簂ink，visited，hover，active：
a:link，定義正常鏈接的樣式；
a:visited，定義已訪問過鏈接的樣式；
a:hover，定義鼠標(biāo)懸浮在鏈接上時(shí)的樣式；
a:active，定義鼠標(biāo)點(diǎn)擊鏈接時(shí)的樣式。
原因：
1、鏈接未被訪問時(shí)，鼠標(biāo)經(jīng)過同時(shí)擁有l(wèi)ink,hover兩種屬性，后面的屬性會(huì)覆蓋前面屬性的定義。
2、鏈接被點(diǎn)擊時(shí)會(huì)觸發(fā)active屬性，同時(shí)覆蓋前面的屬性
3、鏈接被訪問過后，鼠標(biāo)經(jīng)過時(shí)同時(shí)擁有visited、hover兩種屬性。
4、所以說hover要放在link、visired的后面。
div:first-child和div:first-of-type的作用和區(qū)別
先看下面一條代碼：
p:first-child 匹配到的是p元素,因?yàn)閜元素是div的第一個(gè)子元素；
h1:first-child 匹配不到任何元素，因?yàn)樵谶@里h1是div的第二個(gè)子元素，而不是第一個(gè)；
span:first-child 匹配不到任何元素，因?yàn)樵谶@里兩個(gè)span元素都不是div的第一個(gè)子元素；
p:first-of-type 匹配到的是p元素,因?yàn)閜是div的所有類型為p的子元素中的第一個(gè)；
h1:first-of-type 匹配到的是h1元素，因?yàn)閔1是div的所有類型為h1的子元素中的第一個(gè)；
span:first-of-type 匹配到的是第三個(gè)子元素span。這里div有兩個(gè)為span的子元素，匹配到的是它們中的第一個(gè)。
總結(jié)：
1、:first-child 匹配的是某父元素的第一個(gè)子元素，可以說是結(jié)構(gòu)上的第一個(gè)子元素。
2、:first-of-type 匹配的是某父元素下相同類型子元素中的第一個(gè)，比如 p:first-of-type，就是指所有類型為p的子元素中的第一個(gè)。這里不再限制是第一個(gè)子元素了，只要是該類型元素的第一個(gè)就行了。
3、同樣類型的選擇器 :last-child 和 :last-of-type、:nth-child(n) 和 :nth-of-type(n) 也可以這樣去理解。
