css布局級層級關(guān)系(2)--2017.11.13

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)色

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末昏滴,一起剝皮案震驚了整個濱河市猴鲫,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌谣殊,老刑警劉巖拂共,帶你破解...
    沈念sama閱讀 206,968評論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異蟹倾,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,601評論 2 382
  • 文/潘曉璐 我一進(jìn)店門鲜棠,熙熙樓的掌柜王于貴愁眉苦臉地迎上來肌厨,“玉大人,你說我怎么就攤上這事豁陆「贪郑” “怎么了?”我有些...
    開封第一講書人閱讀 153,220評論 0 344
  • 文/不壞的土叔 我叫張陵盒音,是天一觀的道長表鳍。 經(jīng)常有香客問我,道長祥诽,這世上最難降的妖魔是什么譬圣? 我笑而不...
    開封第一講書人閱讀 55,416評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮雄坪,結(jié)果婚禮上厘熟,老公的妹妹穿的比我還像新娘。我一直安慰自己维哈,他們只是感情好绳姨,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,425評論 5 374
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著阔挠,像睡著了一般飘庄。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上购撼,一...
    開封第一講書人閱讀 49,144評論 1 285
  • 那天跪削,我揣著相機(jī)與錄音,去河邊找鬼份招。 笑死切揭,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的锁摔。 我是一名探鬼主播廓旬,決...
    沈念sama閱讀 38,432評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼谐腰!你這毒婦竟也來了孕豹?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,088評論 0 261
  • 序言:老撾萬榮一對情侶失蹤十气,失蹤者是張志新(化名)和其女友劉穎励背,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體砸西,經(jīng)...
    沈念sama閱讀 43,586評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡叶眉,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,028評論 2 325
  • 正文 我和宋清朗相戀三年址儒,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片衅疙。...
    茶點(diǎn)故事閱讀 38,137評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡莲趣,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出饱溢,到底是詐尸還是另有隱情喧伞,我是刑警寧澤,帶...
    沈念sama閱讀 33,783評論 4 324
  • 正文 年R本政府宣布绩郎,位于F島的核電站潘鲫,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏肋杖。R本人自食惡果不足惜溉仑,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,343評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望兽愤。 院中可真熱鬧彼念,春花似錦、人聲如沸浅萧。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,333評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽洼畅。三九已至吩案,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間帝簇,已是汗流浹背徘郭。 一陣腳步聲響...
    開封第一講書人閱讀 31,559評論 1 262
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留丧肴,地道東北人残揉。 一個月前我還...
    沈念sama閱讀 45,595評論 2 355
  • 正文 我出身青樓,卻偏偏與公主長得像芋浮,于是被迫代替她去往敵國和親抱环。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,901評論 2 345

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理纸巷,服務(wù)發(fā)現(xiàn)镇草,斷路器,智...
    卡卡羅2017閱讀 134,601評論 18 139
  • 1.class 和 id 的使用場景? class:類選擇器瘤旨,一個標(biāo)簽可以有多個類且同一個類可以用到不同的標(biāo)簽上梯啤,...
    饑人谷_兔子君閱讀 1,180評論 0 0
  • class和id 同一個class屬性可以出現(xiàn)多次 添加給不同的元素使用 用 .class 來添加css樣式而id...
    ezrealor閱讀 432評論 0 0
  • 其實(shí)平時用得多的選擇器無非也就是那么幾個,時間久了存哲,許多不常用的選擇器就慢慢忘記了因宇。為了不讓自己忘記這些選擇器七婴,今...
    盛夏晚清風(fēng)閱讀 1,814評論 0 5
  • 一,class 和 id 的使用場景? id選擇器察滑,匹配特定id的元素本姥。class是類選擇器,匹配class包含(...
    DeeJay_Y閱讀 352評論 0 0