- class 和 id 的使用場景?
同一個(gè)html文件中，id的值不能相同，class的值可以相同，這決定了他們的性質(zhì)。
id用來標(biāo)記整個(gè)文件中具有獨(dú)一無二意義的標(biāo)簽；
而class用來標(biāo)記整個(gè)文件中具有同一類意義的標(biāo)簽。 - CSS選擇器常見的有幾種?
- 基礎(chǔ)選擇器
- 組合選擇器
- 屬性選擇器
- 偽類選擇器
- 偽元素選擇器
- 選擇器的優(yōu)先級是怎樣的?對于復(fù)雜場景如何計(jì)算優(yōu)先級？
優(yōu)先級排列為： - 在屬性后面使用 !important 會覆蓋頁面內(nèi)任何位置定義的元素樣式
- 作為style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式
- id選擇器
- 類選擇器
- 偽類選擇器
- 屬性選擇器
- 標(biāo)簽選擇器
- 通配符選擇器
- 瀏覽器自定義
計(jì)算優(yōu)先級方法：
將行內(nèi)樣式 <div style="xxx"></div>標(biāo)記為a，ID 選擇器標(biāo)記為b，類，屬性選擇器和偽類選擇器標(biāo)記為c，標(biāo)簽選擇器、偽元素標(biāo)記為d，根據(jù)abcd的個(gè)數(shù)統(tǒng)計(jì)abcd的值，用比較4位數(shù)的值來比較abcd的值，值大的優(yōu)先級高。
- a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么？
順序?yàn)椋篴:link,a:visited,a:hover,a:active
因?yàn)閏ss中有一個(gè)規(guī)則，當(dāng)標(biāo)簽的優(yōu)先級相同時(shí)，采用排列在最后的標(biāo)簽樣式。
要防止a:visited的樣式覆蓋a:hover,a:active的樣式，所以a:visited應(yīng)該在它們前面，同理a:hover應(yīng)該在a:active前面。 - 以下選擇器分別是什么意思?
#header{
} 選擇id為header的元素
.header{
} 選擇class為header的元素
.header .logo{
} 選擇class為header的元素的子元素中class為logo的元素
.header.mobile{
} 選擇class同時(shí)為header和mobile的元素
.header p, .header h3{
} 選擇class為header的元素的p和h3子元素
#header .nav>li{
} 選擇id為header的元素的子元素中class為nav的子元素li
#header a:hover{
} 選擇id為header的元素的子元素a的鼠標(biāo)懸停狀態(tài)
#header .logo~p{
} 選擇id為header的元素的子元素中class為logo的元素之后的同級p元素
#header input[type="text"]{
} 選擇id為header的元素的子元素input中type="text"的元素
- 列出你知道的偽類選擇器
- 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:enabled 匹配表單中可用的元素
- E:disabled 匹配表單中禁用的元素
- E:checked 匹配表單中被選中的radio或checkbox元素
- E::selection 匹配用戶當(dāng)前選中的元素
- E:nth-child(n) 匹配其父元素的第n個(gè)子元素，第一個(gè)編號為1
- E:nth-of-type(n) 與:nth-child()作用類似，但是僅匹配使用同種標(biāo)簽的元素
- div:first-child和div:first-of-type的作用和區(qū)別
- div:first-child：選擇所有div元素的父元素的第一個(gè)子元素
- div:first-of-type：選擇所有div元素的父元素的第一個(gè)div子元素
區(qū)別就是div:first-of-type比div:first-child多了一個(gè)特定的標(biāo)簽限制
- 運(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>
首先，.item1:first-child選擇器選擇了所有class="item"的元素的父元素的第一個(gè)子元素，不管是p元素還是h3元素，它們的父元素div的第一個(gè)子元素都是p元素，所有p元素應(yīng)用了樣式，字體變?yōu)榧t色。
其次，.item1:first-of-type選擇器選擇了所有class="item"的元素的父元素的第一個(gè)同種標(biāo)簽的子元素，具體到類， <p class="item1">aa</p>選擇了它的父元素div的第一個(gè)標(biāo)簽為p的子元素，即選中了它自己，<h3 class="item1">bb</h3>選擇了它的父元素div的第一個(gè)標(biāo)簽為h3的子元素，即選中了它自己,<h3 class="item1">ccc</h3>選擇了它的父元素div的第一個(gè)標(biāo)簽為h3的子元素，即選中了<h3 class="item1">bb</h3>，所有最后是aa和bb應(yīng)用了樣式：背景色為藍(lán)色。
