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

• id:指定標(biāo)簽的唯一標(biāo)識(shí)矢门，id屬性的值檀葛，在當(dāng)前的page頁(yè)面要是唯一的主卫。
• class:可以用來(lái)選擇同一類型的元素孽椰，class屬性的值可以有多個(gè)。

CSS選擇器常見(jiàn)的有幾種?

• 基礎(chǔ)選擇器

  1. 通配符選擇器
  2. id選擇器
  3. 類選擇器
  4. 標(biāo)簽選擇器

• 組合選擇器

  1. 多元素選擇器：以','分隔暴凑，表示同時(shí)匹配多個(gè)選擇器對(duì)應(yīng)的元素
  2. 后代選擇器：以空格分隔

• 屬性選擇器

  1. E[attr]：篩選出所有具有屬性名為attr的屬性的元素
  2. E[attr=value]：篩選出所有屬性attr的值為vlaue的元素

• 偽類選擇器

  1. E:link：未被訪問(wèn)時(shí)的樣式
  2. E:visited：已經(jīng)被訪問(wèn)后的樣式
  3. E:hover：鼠標(biāo)懸停在a鏈接之上的樣式
  4. E:active：鼠標(biāo)按下但未釋放時(shí)的樣式
  5. E:first-child：父元素的各類標(biāo)簽中第一個(gè)子元素且必須符合指定類型（為E）
  6. E:nth-child：匹配其父元素的第n個(gè)子元素

• 偽元素選擇器

  1. E:before：在E元素之前插入的內(nèi)容
  2. E:after：在E元素之后插入的內(nèi)容

選擇器的優(yōu)先級(jí)是怎樣的?對(duì)于復(fù)雜場(chǎng)景如何計(jì)算優(yōu)先級(jí)峦甩？

• css優(yōu)先級(jí)

1. 在屬性后面使用 !important 會(huì)覆蓋頁(yè)面內(nèi)任何位置定義的元素樣式。
2. 作為style屬性寫(xiě)在元素內(nèi)的樣式
3. id選擇器
4. 類選擇器
5. 標(biāo)簽選擇器
6. 通配符選擇器
7. 瀏覽器自定義或繼承

• 對(duì)于復(fù)雜場(chǎng)景優(yōu)先級(jí)的計(jì)算

CSS優(yōu)先級(jí)：是由四個(gè)級(jí)別和各級(jí)別的出現(xiàn)次數(shù)決定的现喳。

四個(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í)越高。

a:link, a:hover, a:active, a:visited 的順序是怎樣的帮碰？ 為什么相味？

順序?yàn)椋?/p>

a:link
a:visited
a:hover
a:active

原因：

• 當(dāng)鼠標(biāo)移動(dòng)到a標(biāo)簽上，此時(shí)與標(biāo)簽顏色相關(guān)的選擇器有：a:link,a:visited,a:hover,這三個(gè)選擇器擁有相同的優(yōu)先級(jí)殉挽，但是被寫(xiě)在最后的選擇器會(huì)覆蓋掉之前的選擇器丰涉，因此要想實(shí)現(xiàn)“當(dāng)鼠標(biāo)移動(dòng)到a標(biāo)簽上變換顏色”的效果，需要將a:hover置于 a:link 和 a:visited 之后

• 當(dāng)鼠標(biāo)點(diǎn)擊a標(biāo)簽斯碌，此時(shí)與標(biāo)簽顏色相關(guān)的選擇器有：a:link,a:visited,a:hover和a:active一死，這四個(gè)選擇器擁有相同的優(yōu)先級(jí)，但是被寫(xiě)在最后的選擇器會(huì)覆蓋掉之前的選擇器傻唾，因此要想實(shí)現(xiàn)“當(dāng)鼠標(biāo)點(diǎn)擊a標(biāo)簽時(shí)變換顏色”的效果投慈，需要將a:active置于a:link,a:visited,a:hover 之后

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

QQ截圖20170923012426.png

列出你知道的偽類選擇器

E:first-child 匹配元素E的第一個(gè)子元素
E:link 匹配所有未被點(diǎn)擊的鏈接
E:visited 匹配所有已被點(diǎn)擊的鏈接
E:active 匹配鼠標(biāo)已經(jīng)其上按下、還沒(méi)有釋放的E元素
E:hover 匹配鼠標(biāo)懸停其上的E元素
E:enabled 匹配表單中可用的元素
E:disabled 匹配表單中禁用的元素
E:checked 匹配表單中被選中的radio或checkbox元素
E::selection 匹配用戶當(dāng)前選中的元素
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:not(selector) 匹配不符合當(dāng)前選擇器的任何元素

div:first-child和div:first-of-type跋理，div :first-child和div :first-of-type的作用和區(qū)別

• div:first-child：選擇屬于其父元素的首個(gè)子元素的每個(gè)div元素择克，并為其設(shè)置樣式
• div:first-of-type：選擇器匹配屬于其父元素的特定類型的首個(gè)子元素的每個(gè)元素。
• div :first-child：選擇所有div元素下的所有元素中屬于其父元素首個(gè)元素的元素
• div :first-of-type：選擇所有div元素下的所有元素屬于其父元素特定類型的首個(gè)子元素的每個(gè)元素
• 運(yùn)行如下代碼：

QQ截圖20170923020140.png

QQ截圖20170923014500.png