class 和 id 的使用場(chǎng)景?###
id選擇器定義特定id的唯一元素，class選擇器定義特定類名的一類元素
id選擇器的優(yōu)先級(jí)僅次于行內(nèi)樣式，高于類選擇器
CSS選擇器常見(jiàn)的有幾種?###
基礎(chǔ)選擇器
-
*通用元素選擇器，匹配頁(yè)面任何元素（這也就決定了我們很少使用） -
#idid選擇器，匹配特定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.class2id和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::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í)？###
選擇器的特殊性分為4個(gè)等級(jí)：a b c d，計(jì)算abcd的值，值越大權(quán)重越高
*注：使用！important會(huì)覆蓋頁(yè)面內(nèi)任何位置定義的元素樣式 *
- 如果是行內(nèi)style樣式a=1
- id選擇器的個(gè)數(shù)對(duì)應(yīng)b的值
- 類、屬性、偽類選擇器的數(shù)量對(duì)應(yīng)c的值
- 標(biāo)簽選擇器、偽元素選擇器的數(shù)量對(duì)應(yīng)d的值
例如：
| 選擇器 | 特殊性 | 以10為基數(shù)的特殊性 |
|---|---|---|
| style=" " { } | 1,0,0,0 | 1000 |
| #wrapper #content { } | 0,2,0,0 | 200 |
| div#content { } | 0,1,0,1 | 101 |
| p.comment .dateposted { } | 0,0,2,1 | 21 |
| p | 0,0,0,1 | 1 |
a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么？###
正確的順序：
a:link /* 匹配所有未被點(diǎn)擊的鏈接 */
a:visited /* 匹配所有已被點(diǎn)擊的鏈接 */
a:hover /* 匹配鼠標(biāo)按下未被釋放的鏈接 */
a:active /* 匹配鼠標(biāo)懸停其上的鏈接 */
原因： a:visited表示已被訪問(wèn)的鏈接，是鏈接被訪問(wèn)后永久生效的，如果放在最后會(huì)覆蓋掉其他樣式 。hover必須放在active之前，如果放在之后用戶點(diǎn)擊鼠標(biāo)顯示的也是hover樣式
以下選擇器分別是什么意思?###
#header{
} /* 定位id="header"頁(yè)面內(nèi)特定元素 */
.header{
} /* 匹配class="header"的一類元素 */
.header .logo{
} /* 匹配class=header元素后代中所有class=logo的元素（包括子元素、子元素向下遞歸）*/
.header.mobile{
} /* 匹配即包含class=header又包含class=mobile的元素 */
.header p, .header h3{
} /* 同時(shí)匹配class=header后代中標(biāo)簽為p和h3的元素，非即又關(guān)系 */
#header .nav>li{
} /* 匹配id=header后代中所有class=nav的直接子元素li */
#header a:hover{
} /* 匹配id=header后代中所有鼠標(biāo)懸停其上樣式的元素 */
#header .logo~p{
} /* 匹配id=header后代中所有與class=logo同級(jí)元素的p */
#header input[type="text"]{
} /* 匹配id=header元素后代中所有屬性為type=text的元素 */
列出你知道的偽類選擇器###
偽類選擇器
-
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::selection匹配用戶當(dāng)前選中的元素 -
E:nth-child(n)匹配其父元素的第n個(gè)子元素，第一個(gè)編號(hào)為1 -
E:nth-of-type(n)與:nth-child()作用類似，但是僅匹配使用同種標(biāo)簽的元素
div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和區(qū)別 （注意空格的作用）###
div:first-child：匹配 既是divy元素 又是同級(jí)元素的第一個(gè)元素 兩個(gè)條件必須同時(shí)滿足
div:first-of-type：匹配同級(jí)元素中第一個(gè)div元素
div :first-child：加空格指的是div后代中第一個(gè)子元素
div :first-of-type：加空格指的是div后代中第一個(gè)同種類型子元素
運(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>
運(yùn)行結(jié)果：
10.png
原因：
.item1:first-child{
color:red;
} / * 匹配item1父元素的第一個(gè)子元素* /
item1父元素的第一個(gè)子元素是p標(biāo)簽的item1，所以是aa顯示紅色
.item1:first-of-type{
background: blue;
} / * 匹配item1父元素的第一個(gè)同種類型的子元素* /
item1父元素的子元素是p標(biāo)簽的item1，同種類型的還有兩個(gè)h3，第一個(gè)同種類型，所以第二個(gè)背景不變藍(lán)
