class和id的使用場(chǎng)景

• class: 指定標(biāo)簽的類名尺锚，用于選擇同一類型的元素。如果在頁(yè)面上有些元素有某些共同的特征,我們可以加同一個(gè)class
• id: 指定標(biāo)簽的唯一標(biāo)識(shí)惜浅，在頁(yè)面上是獨(dú)一無(wú)二的

CSS選擇器常見的有幾種?

基礎(chǔ)選擇器
組合選擇器
屬性選擇器
偽類選擇器
偽元素選擇器

基礎(chǔ)選擇器

組合選擇器

屬性選擇器

偽類選擇器

偽元素選擇器

選擇器優(yōu)先級(jí)是怎樣的

優(yōu)先級(jí)從高到底依次是

在屬性后面使用 !important 會(huì)覆蓋頁(yè)面內(nèi)任何位置定義的元素樣式
作為style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式
id選擇器
類選擇器
偽類選擇器
屬性選擇器
標(biāo)簽選擇器
通配符選擇器
瀏覽器自定義

對(duì)于復(fù)雜場(chǎng)景如何計(jì)算優(yōu)先級(jí)澄港？

在CSS2.1中是這樣描述的：

• 如果聲明來(lái)自于“style”屬性，而不是帶有選擇器的規(guī)則柄沮，則記為 1回梧，否則記為 0 (= a)（HTML元素的style屬性也是樣式規(guī)則，因?yàn)檫@些樣式規(guī)則沒(méi)有選擇器祖搓，因此記為a=1,b=0,c=0,d=0）
• 計(jì)算選擇器中 ID 屬性的個(gè)數(shù) (= b)
• 計(jì)算選擇器中其他屬性(類狱意、屬性選擇器)和偽類的個(gè)數(shù) (= c)
• 計(jì)算選擇器中元素名稱和偽元素的個(gè)數(shù) (= d)

將四個(gè)數(shù)字按 a-b-c-d這樣連接起來(lái)（位于大數(shù)進(jìn)制的數(shù)字系統(tǒng)中），構(gòu)成選擇器的優(yōu)先級(jí)拯欧。
當(dāng)遇到多個(gè)選擇符同時(shí)出現(xiàn)時(shí)候 按選擇符得到的Specificity值逐位相加详囤， （數(shù)位之間沒(méi)有進(jìn)制 比如說(shuō)： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0） 就得到最終計(jì)算得的specificity， 然后在比較取舍時(shí)按照從左到右的順序逐位比較哈扮。

比如：
<pre>
div { font-size:12px;}/此時(shí)div是元素名稱為d纬纪，個(gè)數(shù)為1個(gè)，Specificity值為0,0,0,1/
body div p{color: green;} /3個(gè)元素名稱,Specificity值為0,0,0,3 /
div .my{ font-size:12px;} /一個(gè)元素名稱為d滑肉，一個(gè)類選擇符為c包各，Specificity值為0,0,1,1/
style="color: red;" /Specificity值為1,0,0,0/
</pre>

a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么靶庙？

順序?yàn)椋篴:link问畅、a:visited、a:hover六荒、a:active

當(dāng)選擇器優(yōu)先級(jí)別相同時(shí)护姆，后定義的會(huì)覆蓋先定義的。在CSS中掏击，如果對(duì)于相同元素有針對(duì)不同條件的定義卵皂，宜將最一般的條件放在最上面，并依次向下砚亭，保證最下面的是最特殊的條件灯变。這樣殴玛，瀏覽器在顯示元素時(shí)，才會(huì)從特殊到一般添祸、逐級(jí)向上驗(yàn)證條件滚粟，才會(huì)使你的每一個(gè)CSS語(yǔ)句都起到效果。關(guān)于a:link, a:hover, a:active, a:visited 的順序有一個(gè)便于記憶的“愛恨原則”（LoVe/HAte）刃泌，即四種偽類的首字母:LVHA凡壤。

a:link 代表為訪問(wèn)鏈接的樣式，只要是超鏈接且未被訪問(wèn)耙替，則鏈接就會(huì)按照設(shè)定的樣式顯示

a:visited 代表鏈接訪問(wèn)后的樣式亚侠，只要鏈接被訪問(wèn)過(guò)了，那么之后就會(huì)按照你設(shè)置的樣式顯示 如果放在a:hover的后面林艘，那么你點(diǎn)擊之后盖奈，由于a:visited是在后面定義的混坞，它會(huì)將a:hover覆蓋掉狐援，a:hover定義的樣式將不起作用

a:hover 代表的是你光標(biāo)經(jīng)過(guò)某一元素時(shí)的樣式 ，如果放在a:active 后面究孕，因?yàn)槭鞘髽?biāo)點(diǎn)擊的時(shí)候是一直處于a:hover狀態(tài)啥酱，會(huì)覆蓋掉a:active的樣式。所以應(yīng)該排在a:active前面厨诸，使得a:active為最后的樣式镶殷。

以下選擇器分別是什么意思?

#header{}/*id 為 header 元素*/
.header{}/*有 header 類的所有元素*/
.header .logo{}/*有 header 類的所有元素的后代中有 logo類的所有元素*/
.header.mobile{}/*同時(shí)有 header 類和 mobile 類的所有元素*/
.header p, .header h3{}/* header 類的下面的所有元素p標(biāo)簽和h3標(biāo)簽元素*/
#header .nav>li{}/*id 為 header 的元素下面有 nav 類的后代元素的直接 li 子元素*/
#header a:hover{}/*id 為 header 的元素的a子元素中，處于鼠標(biāo)懸停狀態(tài)的鏈接*/
#header .logo~p{}/*id為header下所有class為log的元素之后的同級(jí)p元素微酬。*/
#header input[type="text"]{}/*id 為 header 的元素的 input 子元素中type屬性值為 text 的元素*/

列出你知道的偽類選擇器

div:first-child赏表、div:first-of-type检诗、div :first-child和div :first-of-type的作用和區(qū)別 （注意空格的作用）

div:first-child 表示div的父元素的第一個(gè)子元素是div怖喻。（第一個(gè)必須為div)，如：

<form>
    <div>hello</div>//選中
</form>
<form>
    <p>hel</p>
    <div>hello</div>//不選中
</form>

div:first-of-type表示選擇器匹配屬于其父元素的div的首個(gè)子元素的每個(gè)元素岁诉。等同于:nth-of-type(1)锚沸，如：

<form>
    <p>hel</p>
    <div>hello</div>//選中
</form>
<form>
    <div>hello</div>//選中
</form>

div :first-child表示的是在div的標(biāo)簽下的第一個(gè)子元素，如:

<form>
    <div>
        <p>dasd</p>/*選中*/
        <h2>dad</h2>/*不選中涕癣，因?yàn)椴皇堑谝粋€(gè)子元素*/
        <p>dada</p>/*不選中哗蜈，因?yàn)椴皇堑谝粋€(gè)子元素*/
    </div>
</form>

而div :first-of-type表示的是在div元素中第一次出現(xiàn)的各類標(biāo)簽元素,如

<form>
    <div>
        <p>dasd</p>/*選中*/
        <h2>dad</h2>/*選中*/
        <p>dada</p>/*不選中，因?yàn)檫@個(gè)標(biāo)簽出現(xiàn)第二次了*/
    </div>
</form>

運(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>

實(shí)現(xiàn)效果：

QQ圖片20180102002518.png

解析：因?yàn)閕tem1類的父元素div的第一個(gè)子元素是p元素，所以aa的字體為紅色只搁，又因?yàn)閕tem1類的父元素div的第一個(gè)出現(xiàn)的各類標(biāo)簽有第一個(gè)p和第二個(gè)h3音比，第三個(gè)h3是第二次出現(xiàn)，所以第一個(gè)和第一個(gè)item的背景顏色是藍(lán)色