class 和 id 的使用場(chǎng)景?
- 類class選擇器允許以一種獨(dú)立于文檔元素的方式來(lái)指定樣式。該選擇器可以單獨(dú)使用，也可以與其他元素結(jié)合使用。
- ID 選擇器允許以一種獨(dú)立于文檔元素的方式來(lái)指定樣式。
- 只能在文檔中使用一次
- 不能使用 ID 詞列表
- ID 能包含更多含義
CSS選擇器常見(jiàn)的有幾種?
-
基礎(chǔ)選擇器
* /通用元素選擇器，匹配頁(yè)面任何元素（這也就決定了我們很少使用）/
#id i/d選擇器，匹配特定id的元素/
.class /類選擇器，匹配class包含(不是等于)特定類的元素/
element /標(biāo)簽選擇器/ -
組合選擇器
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選擇器和選擇器連寫的時(shí)候中間沒(méi)有分隔符，. 和 #
本身充當(dāng)分隔符的元素/
element#id /id和class選擇器和選擇器連寫的時(shí)候中間沒(méi)有分隔符，. 和 # 本身
充當(dāng)分隔符的元素/ -
屬性選擇器
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的元素*/ -
偽類選擇器
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 /匹配用戶當(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)前選擇器的任何元素/
-
偽元素選擇器
E::first-line /匹配E元素內(nèi)容的第一行/
E::first-letter /匹配E元素內(nèi)容的第一個(gè)字母/
E::before /在E元素之前插入生成的內(nèi)容/
E::after /在E元素之后插入生成的內(nèi)容/
選擇器的優(yōu)先級(jí)是怎樣的?對(duì)于復(fù)雜場(chǎng)景如何計(jì)算優(yōu)先級(jí)？
從高到低的分別是：
- 在屬性后面使用 !important 會(huì)覆蓋頁(yè)面內(nèi)任何位置定義的元素樣式
- 作為style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式
- id選擇器
- 類選擇器
- 偽類選擇器
- 屬性選擇器
- 標(biāo)簽選擇器
- 通配符選擇器
- 瀏覽器自定義
復(fù)雜場(chǎng)景的計(jì)算優(yōu)先級(jí)
- ID選擇器的特殊性值，加0,1,0,0。
- 類選擇器、屬性選擇器或偽類，加0,0,1,0。
- 元素和偽元素，加0,0,0,1。
- 通配選擇器*對(duì)特殊性沒(méi)有貢獻(xiàn)，即0,0,0,0。
- 最后比較特殊的一個(gè)標(biāo)志!important（權(quán)重），它沒(méi)有特殊性值，但它的優(yōu)先級(jí)是最高的，為了方便記憶，可以認(rèn)為它的特殊性值為1,0,0,0,0。
a{color: yellow;} /特殊性值：0,0,0,1/
div a{color: green;} /特殊性值：0,0,0,2/
.demo a{color: black;} /特殊性值：0,0,1,1/
.demo input[type="text"]{color: blue;} /特殊性值：0,0,2,1/
.demo [type="text"]{color: grey;} /特殊性值：0,0,2,0/
#demo a{color: orange;} /特殊性值：0,1,0,1/
div#demo a{color: red;} /特殊性值：0,1,0,2/
選擇器特殊性值是從左向右排序*的，特殊性值1,0,0,0大于以0開(kāi)頭的所有特殊性值，即便它是0,99,99,99，優(yōu)先級(jí)依然比1,0,0,0要低。
a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么？
正確的順序（愛(ài)恨原則）-- LVHA
- a:link{color:red;} 未訪問(wèn)的鏈接
- a:visited{color:blue;} 已訪問(wèn)的鏈接
- a:hover{color:yellow;} 鼠標(biāo)劃過(guò)鏈接
- a:active 已選中的鏈接
瀏覽器解釋CSS時(shí)遵循的“就近原則”。
在CSS中，如果對(duì)于相同元素有針對(duì)不同條件的定義，宜將最一般的條件放在最上面，并依次向下，保證最下面的是最特殊的條件。
- 鼠標(biāo)經(jīng)過(guò)的“未訪問(wèn)鏈接”同時(shí)擁有a:link、a:hover兩種屬性，后面的屬性會(huì)覆蓋前面的屬性定義
- 鼠標(biāo)經(jīng)過(guò)的“已訪問(wèn)鏈接”同時(shí)擁有a:visited、a:hover兩種屬性，后面的屬性會(huì)覆蓋前面的屬性定義
以下選擇器分別是什么意思?
列出你知道的偽類選擇器
E:first-child: 匹配元素E中的第一個(gè)元素
E:nth-child(n) 匹配其父元素的第n個(gè)子元素，第一個(gè)編號(hào)為1
E:last-child 匹配元素E中倒數(shù)的第一個(gè)元素
E:nth-last-child(n) 匹配其父元素倒數(shù)的第n個(gè)子元素，第一個(gè)編號(hào)為1
E:nth-of-type(n) 匹配使用同種標(biāo)簽的元素
E:nth-last-of-type(n) 匹配使用同種標(biāo)簽的元素
E:first-of-type 匹配父元素下使用同種標(biāo)簽的第一個(gè)子元素，等同于
E:nth-of-type(1)
E:last-of-type 匹配父元素下使用同種標(biāo)簽的最后一個(gè)子元素，等同于
E:nth-last-of-type(1)div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和區(qū)別 **
div:first-child和div :first-child**的作用和區(qū)別
作用：選擇屬于其父元素的首個(gè)子元素的每個(gè) <div> 元素
作用： 匹配元素div中的第一個(gè)元素
div:first-of-type和div :first-of-type的作用和區(qū)別
作用： 父元素的首個(gè) div元素
作用：匹配元素div中同種標(biāo)簽下的第一個(gè)元素
- 運(yùn)行如下代碼，解析下輸出樣式的原因。
運(yùn)行效果：
輸入樣式原因：
- 父元素下第一個(gè)元素是aa，顏色為red。
- 父元素下?lián)碛型N標(biāo)簽的第一個(gè)元素背景色為blue，p標(biāo)簽為aa，h3標(biāo)簽下第一個(gè)元素是bb。
參考
http://www.cnblogs.com/wangmeijian/p/4207433.html
http://www.cnblogs.com/xiaochaohuashengmi/archive/2010/09/06/1819624.html
