class 和 id 的使用場景?
- id選擇器優(yōu)先級很高且只能使用一次臀突，因此一般用于頁面分塊的塊級標(biāo)簽上
- 類選擇器纯出，一個標(biāo)簽上可以有多個類滥沫，且同一個類可以用在多個標(biāo)簽上松靡，多用于多個標(biāo)簽樣式相同時
CSS選擇器常見的有幾種?
常見的選擇器有：
-
基礎(chǔ)選擇器
-
*通用元素選擇器 -
#id選擇器 -
.class類選擇器 -
element標(biāo)簽選擇器
-
-
屬性選擇器
-
E[attr]匹配所有具有屬性attr的元素 -
E[attr=value]匹配所有屬性attr的值為value的元素 -
E[attr^value]匹配屬性attr的值以value開頭的元素 -
E[attr$value]匹配屬性attr的值以value結(jié)尾的元素
-
-
偽類選擇器
-
E:first-child匹配元素E的第一個子元素 -
E:hover匹配鼠標(biāo)懸停的元素 -
E:link匹配所有未被點擊的鏈接 -
E:visited匹配所有已被點擊的鏈接 -
E:focus匹配獲得當(dāng)前焦點的元素 -
E:active匹配鼠標(biāo)已經(jīng)按下還未釋放的元素 -
E:enable匹配表單中可用的元素 -
E:disable匹配表單中禁用的元素 -
E:checked匹配所有已被選擇的radio和checkbox元素 -
E:first-of-type匹配父元素下使用同種標(biāo)簽的第一個子元素
-
-
組合選擇器
-
E F后代選擇器 -
E+F直接相鄰選擇器 -
E>F子元素選擇器 -
E~F普通相鄰選擇器
-
選擇器的優(yōu)先級是怎樣的?對于復(fù)雜場景如何計算優(yōu)先級狐榔？
優(yōu)先級從高到低依次是：
- 在屬性后面使用!import會覆蓋頁面內(nèi)任何位置定義的元素樣式
- 作為style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式
- id選擇器
- 類選擇器
- 偽類選擇器
- 屬性選擇器
- 標(biāo)簽選擇器
- 通配符選擇器
- 瀏覽器自定義
復(fù)雜場景下的計算：
- 根據(jù)組合選擇器按照以下規(guī)則統(tǒng)計各類選擇器的個數(shù)：
行內(nèi)樣式 --> 統(tǒng)計值為a
ID選擇器 --> 統(tǒng)計值為b
類坛增、屬性選擇器、偽類選擇器 --> 統(tǒng)計為c
標(biāo)簽選擇器薄腻、偽元素選擇器 --> 統(tǒng)計為d - 先比較a值的大小收捣，a值大的則優(yōu)先級高;如果a值相等，則再比較b值的大小庵楷，b值大的優(yōu)先級高罢艾；如果b值相等，則比較c值的大小尽纽，c值大的優(yōu)先級高咐蚯；如果c值相等，則比較d值的大小弄贿，d值大的優(yōu)先級高春锋；
a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么差凹？
未點擊鏈接前期奔，link偽類長期處于激活狀態(tài)，鼠標(biāo)懸停（或點擊）時危尿，a鏈接同時處于link和hover(或active)狀態(tài)呐萌，由于它們特指度相同，在同時激活的情況下，后出現(xiàn)的偽類樣式會覆蓋前面的偽類樣式寿桨，故link狀態(tài)必須寫在hover(或active)之前筐咧。
若把hover放在active后面，當(dāng)點擊鏈接一瞬渠旁，實際你在激活active狀態(tài)的同時觸發(fā)了hover偽類,hover在后面覆蓋了active的顏色，所以無法看到active的顏色船逮。故hover在active之前顾腊。
若把visited放在hover后面，那已訪問過的鏈接一直觸發(fā)著visited偽類挖胃，會覆蓋hover樣式杂靶。
最后梆惯，其實link、visited兩個偽類之間順序無所謂吗垮。（因為它倆不可能同時觸發(fā)垛吗，即又未訪問同時又已訪問。）
以下選擇器分別是什么意思?
-
#header{}匹配id為header的元素 -
.header{}匹配class為header的元素 -
.header .logo{}匹配class為header的所有class為logo的后代元素 -
.header.mobile{}匹配class="header mobile"的元素 -
.header p, .header h3{}匹配class="header"元素的后代p元素和后代h3元素 -
#header .nav>li{}匹配id="header"元素的后代中class="nav"的元素的li子元素 -
#header a:hover{}匹配id="header"元素的后代中a元素的hover狀態(tài) -
#header .logo~p{}匹配id="header"元素的后代中class="logo"的元素相鄰p元素 -
#header input[type="text"]{}匹配id="header"元素的后代中type="text"的input元素
列出你知道的偽類選擇器
-
E:first-child匹配元素E的第一個子元素 -
E:hover匹配鼠標(biāo)懸停的元素 -
E:link匹配所有未被點擊的鏈接 -
E:visited匹配所有已被點擊的鏈接 -
E:focus匹配獲得當(dāng)前焦點的元素 -
E:active匹配鼠標(biāo)已經(jīng)按下還未釋放的元素 -
E:enable匹配表單中可用的元素 -
E:disable匹配表單中禁用的元素 -
E:checked匹配所有已被選擇的radio和checkbox元素 -
E:first-of-type匹配父元素下使用同種標(biāo)簽的第一個子元素
div:first-child和div:first-of-type的作用和區(qū)別
-
div:first-child匹配的是div元素的第一個子元素 -
div:first-of-type指定父元素的首個div元素
運行如下代碼烁登，解析下輸出樣式的原因
<style>
.item1:first-child{
color: red;
}
.item1:first-of-type{
background: blue;
}
</style>
<div class="ct">
<p class="item1">aa</p>
/*類名為item1的父元素下的第一個子元素怯屉，所以符合樣式規(guī)則1；
類名為item1的父元素下的第一個p元素饵沧，所以也匹配樣式規(guī)則2*/
<h3 class="item1">bb</h3>
/*類名為item1的父元素下的第二個子元素锨络，所以不符合樣式規(guī)則1；
類名為item1的父元素下的第一個h3元素狼牺，所以匹配樣式規(guī)則2*/
<h3 class="item1">ccc</h3>
/*類名為item1的父元素下的第三個子元素羡儿，所以不符合樣式規(guī)則1；
類名為item1的父元素下的第二個h3元素是钥，所以也不匹配樣式規(guī)則2*/
</div>
