class 和 id 的使用場(chǎng)景?
class 用于具有相同樣式特征的一組元素上寡壮。
id 是元素的獨(dú)一無(wú)二的名稱稀余。
CSS選擇器常見的有幾種?
基本選擇器
組合選擇器
屬性選擇器:
偽類選擇器
偽元素選擇器
選擇器的優(yōu)先級(jí)是怎樣的?對(duì)于復(fù)雜場(chǎng)景如何計(jì)算優(yōu)先級(jí)滤淳?
依次往下優(yōu)先級(jí)降低:
赏半!important
style內(nèi)聯(lián)樣式
id選擇器
類選擇器
偽類選擇器
屬性選擇器
標(biāo)簽選擇器
通配符選擇器
瀏覽器自定義
復(fù)雜場(chǎng)景計(jì)算方式是:
為各類元素設(shè)立優(yōu)先級(jí),按照以下規(guī)則:
行內(nèi)樣式-a
ID選擇器-b
類蔽挠、屬性選擇器住闯、偽類選擇器 -c
標(biāo)簽選擇器、偽類選擇器-d
首先比較a的大小,a值大的優(yōu)先級(jí)高比原;如果a值相等插佛,再比較b,b值大的優(yōu)先級(jí)高量窘;依次類推雇寇,一直到d.
a:link, a:hover, a:active, a:visited 的順序是怎樣的? 為什么蚌铜?
a:link
a:visited
a:hover
a:active
在CSS中锨侯,如果對(duì)同樣的元素有針對(duì)不同條件的定義,一般講最一般的條件放在最上面厘线,最特殊的條件放在最下面识腿。
因?yàn)椋瑸g覽器在顯示元素時(shí)造壮,會(huì)從特殊到一般、逐級(jí)向上驗(yàn)證條件骂束。
header 是ID選擇器
.header 是類選擇器
.header .logo 后代選擇器耳璧,中間有空格,只選擇類header下面的子元素logo
.header.mobile 中間沒(méi)有風(fēng)格符展箱,.本身充當(dāng)分隔符
.header p,.header h3 組合選擇器旨枯,選擇類.header 下的子元素p和類.header 下的子元素h3
header .nav>li id為header元素下的子元素nav下的直接子元素li
header a:hover id為header元素下的偽類子元素a:hover
選擇id為header元素下的logo和所有p元素
選擇id為header元素下的input元素中屬性type="text"的元素
列出你知道的偽類選擇器
a:visited
a:active
a:link
a:hover
a:focus
a:disabled
a:checked
a:first-child
a:enabled
div:first-child、div:first-of-type混驰、div :first-child和div :first-of-type的作用和區(qū)別 (注意空格的作用)
div:first-child 匹配div元素父元素中的第一個(gè)子元素
div:first-of-type 匹配div元素父容器下的同種類型中的第一個(gè)
.item1:first-child 匹配item1元素父容器下的類為item1的第一個(gè)子元素的顏色變?yōu)榧t色攀隔,所以aa顯示為紅色
.item1:first-of-type 匹配item1元素父容器下類為item1的同類標(biāo)簽的第一個(gè),所以是aa,bb的背景色變藍(lán)