1.class是類選擇器巍耗,可以針對多個元素一起調(diào)用沽损,可以重復(fù)使用,而ID選擇器只能被調(diào)用一次耗跛,只能被一個元素所使用
class選擇器可以用于寫復(fù)用樣式,如多個DIV同用一個樣式類型時可以用class選擇器
id選擇器可以用某個元素的唯一的表示攒发,不可重復(fù)调塌,一般用于樣式布局時只出現(xiàn)一次的情況,大結(jié)構(gòu)不變的情況下的布局惠猿。
2.css常見的選擇器有5種羔砾。基礎(chǔ)選擇器偶妖,組合選擇器姜凄,屬性選擇器,偽類和偽元素選擇器趾访,五種态秧。
3.優(yōu)先級是樣式后加!important>內(nèi)聯(lián)樣式>id樣式>類選擇器>偽類選擇器>屬性選擇器>標(biāo)簽選擇器>通配符選擇器>瀏覽器自定義
復(fù)雜場景計(jì)算優(yōu)先級:一般按照如上的順序先給選擇器標(biāo)識abcde幾個級別,最后累計(jì)統(tǒng)計(jì)該復(fù)雜選擇器的abcde的個數(shù)扼鞋,根據(jù)個數(shù)
進(jìn)行對比
4.a:link->a:visited->a:hover->a:active 因?yàn)閍:visited必須放在a:hover和a:active前面申鱼,因?yàn)槿绻鸻:visited如果放到最后
會覆蓋到前面所有效果 最后只顯示出a:visited顏色 所以要把它放在最前面,在同個元素定義不同的CSS效果 同屬偽類選擇器后者會取締前者
5.#header{
} 代表名字為header的id選擇器
.header{
}代表名字為header的類選擇器
.header .logo{
}代表header類下的名字為logo的類選擇器
.header.mobile{
}代表既有類名header又包括類名mobile的選擇器
.header p, .header h3{
}代表header類下的p行和header類下的h3
header .nav>li{
}代表header id選擇器下的nav類下的直接li層
header a:hover{
}代表header id選擇器下的a標(biāo)簽在鼠標(biāo)懸浮到該標(biāo)簽時
header .logo~p{
}代表header id選擇器下 logo類選擇器之后的同級P標(biāo)簽
header input[type="text"]{
}代表header id選擇器下 input輸入框 屬性type等于“text”
列出你知道的偽類選擇器:
a:link a:hover a:visited a:active .child:first-child .child:first-of-type .child:nfn-of-type(n)
div:first-child云头、div:first-of-type捐友、div :first-child和div :first-of-type的作用和區(qū)別 (注意空格的作用)
答:div:first-child 是指div所在的父類下的第一個子元素
div:first-of-type 是指div所在的父類下的同種類型的第一個子元素
div :first-child是指div下的第一個子元素
div :first-of-type是指div下的同種類型的第一個子元素
區(qū)別:是作用域不同,前兩個作用在div的父類下溃槐,后兩個作用在div區(qū)塊下
運(yùn)行如下代碼匣砖,解析下輸出樣式的原因。
答:.item1:first-child{
color: red;
} 運(yùn)行后.item1的父類名為ct下的第一個元素為紅色 第一個元素為p 所以aa變紅
.item1:first-of-type{
background: blue;
} 運(yùn)行后.item1的父類名為ct下的第一個同種元素背景為藍(lán)色 所以p下的aa和第一個h3下的bb背景變藍(lán)色