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

• .class，類選擇器。類選擇器可以定義多個(gè)元素。當(dāng)你想定義一組元素以相同的樣式顯現(xiàn)時(shí)可以使用class選擇器。

• id, id選擇器。使用id選擇器來定義某一個(gè)特定元素的樣式。

.class和id選擇器使用場(chǎng)景.png

2. CSS選擇器常見的有幾種?

常見的CSS選擇器有5種。

1. 基本選擇器。

• *{}， 通用元素選擇器。
• #id{}，id選擇器。
• .class， 類選擇器。
• element{}, 標(biāo)簽選擇器。

2. 組合選擇器。

• E,F{}， 多元素選擇器，用逗號(hào)分隔，同時(shí)匹配元素E和元素F。
• E F{}，后代選擇選擇器，用空格分隔，匹配E元素所有的后代元素F。
• E>F{}，子元素選擇器，用>分隔，匹配E元素的所有直接子元素。
• E+F{}， 直接相鄰選擇器，匹配E元素之后的相鄰的同級(jí)元素F。
• E~F{}， 普通相鄰選擇器（弟弟選擇器），匹配E元素之后的同級(jí)元素F（無論直接相鄰與否）。
• .class1.class2{}， id和class選擇器和選擇器連寫的時(shí)候中間沒有分隔符，. 和 # 本身充當(dāng)分隔符的元素。
• element#id{}， id和class選擇器和選擇器連寫的時(shí)候中間沒有分隔符，. 和 # 本身充當(dāng)分隔符的元素。
  3.#####屬性選擇器。
• 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開頭的元素。
• E[attr $= value]{}，匹配屬性attr的值以value結(jié)尾的元素。
• E[attr *= value]{}，匹配屬性attr的值包含value的元素。

4.偽類選擇器。

• E:first-child{}，匹配作為長(zhǎng)子（第一個(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)前選中的元素。
  等等。

5.偽元素選擇器。

• E::first-line，匹配E元素內(nèi)容的第一行。
• E::first-letter，匹配E元素內(nèi)容的第一個(gè)字母。
• E::before{content:''}，在E元素之前插入生成的內(nèi)容。
• E::after{content:''}，在E元素之后插入生成的內(nèi)容。

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

• 優(yōu)先級(jí)（按數(shù)字編號(hào)排序）

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

• 復(fù)雜場(chǎng)景如何計(jì)算優(yōu)先級(jí)？(我在一本書上看到的，權(quán)重計(jì)算規(guī)則蠻清晰明了的）

!important優(yōu)先級(jí)樣式是個(gè)例外，權(quán)值最高。

• 第一等：style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式，權(quán)值為1000。
• 第二等：id選擇器，權(quán)值為100。
• 第三等：類選擇器、偽類選擇器、屬性選擇器，權(quán)值為10。
• 第四等：元素標(biāo)簽選擇器，權(quán)值為1。
• 第五等 : 通配符選擇器、子選擇器、相鄰選擇器等，權(quán)值為0。
• 第六等：繼承的樣式?jīng)]有權(quán)值。

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

排列順序?yàn)?/h5>

• a:link， a:visited, a:hover, a: active。（記憶方法LVHA 愛恨原則 LoVe HAte）

為什么?

• 怎么推導(dǎo)出來的呢。 CSS層疊樣式表，顧名思義，它有層疊的特性。

1. 如果，a:link寫在a:hover之后，依據(jù)CSS層疊特性，a:link將覆蓋a:hover樣式，鼠標(biāo)移動(dòng)到a鏈接上a:hover將不會(huì)生效，這不是我們預(yù)期的效果，所以a:link要寫在a:hover前。
2. 如果，a:link寫在a:active之后，同理，a:link覆蓋了a:active樣式，鼠標(biāo)點(diǎn)擊a鏈接時(shí)，a:active將不會(huì)生效，所以，a:link要寫在a:active前。
3. 如果，a:hover寫在a:active之后，那么，a:hover覆蓋a:active樣式，要想點(diǎn)擊a鏈接，一定會(huì)先經(jīng)過鼠標(biāo)移動(dòng)到a鏈接之上這個(gè)步驟。所以，當(dāng)點(diǎn)擊a鏈接時(shí)，a:active將不會(huì)生效，所以，a:hover要寫在a:active前。
4. 而a:visited，跟a:link類似，它發(fā)生在a:link之后, 把a(bǔ):visited寫在a:hover和a:active會(huì)覆蓋它們的效果，所以它的位置，只能在第二位了。

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

5.1.

選擇器含義.png

5.2. 列出你知道的偽類選擇器

偽類選擇器。

• E:first-child{}，匹配作為長(zhǎng)子（第一個(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)前選擇器的任何元素

5.3. 列出你知道的偽類選擇器 div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和區(qū)別 （注意空格的作用）。

• div:first-child, 匹配父元素下面的第一個(gè)子元素。

QQ截圖20171025232812.png

• div:first-of-type,匹配父元素下使用相同標(biāo)簽的第一個(gè)子元素。

QQ截圖20171025233855.png

• div :first-child，匹配div下的后代元素標(biāo)簽中第一個(gè)子元素。空格是后代的意思。

  
  
  QQ截圖20171025235341.png

• div :first-of-type，匹配div下的后代元素標(biāo)簽中，相同類型標(biāo)簽的第一個(gè)子元素。空格是后代的意思。

  
  
  QQ截圖20171026000439.png

5.3.運(yùn)行如下代碼，解析下輸出樣式的原因。

QQ截圖20171026002421.png

QQ截圖20171026002712.png

QQ截圖20171026002848.png