CSS-進(jìn)階

復(fù)合選擇器

后代選擇器:空格

選擇器1 ?選擇器2 ?{css}

空格隔開的是后代友绝,兒子孫子重孫子都被選中

子帶選擇器:>

根據(jù)嵌套關(guān)系社牲,選擇父元素子代中滿足條件的元素

選擇器語法:選擇器 1 > 選擇器 2 ?{css}

結(jié)果:在選擇器 1 所找到標(biāo)簽的子代(兒子)中铸鹰,找到滿足選擇器2的標(biāo)簽,設(shè)置樣式

注意點(diǎn):1. 子代只包括:兒子;2. 子代選擇器中,選擇器與選擇器之間通過 > 隔開

并集選擇器:均践,

同時選擇多組標(biāo)簽,設(shè)置相同的樣式

選擇器用法:選擇器1摩幔,選擇器2 {css}

結(jié)果:找到選擇器 1 和選擇器 2 選中的標(biāo)簽彤委,設(shè)置樣式

注意點(diǎn):1. 并集選擇器中的每組選擇器之間通過 , 分隔

2. 并集選擇器中的每組選擇器可以是基礎(chǔ)選擇器或者復(fù)合選擇器

3. 并集選擇器中的每組選擇器通常一行寫一個或衡,提高代碼可讀性

交集選擇器

作用:選中頁面中同時滿足多個選擇器的標(biāo)簽

選擇器語法:選擇器 1 選擇器 2 {css}

結(jié)果:找到頁面中既能被選擇器 1 選中焦影,又能被選擇器 2 選中的標(biāo)簽车遂,設(shè)置樣式

注意點(diǎn):1. 交集選擇器中的選擇器之間是緊挨著的,沒有東西分隔

2. 交集選擇器中如果有標(biāo)簽選擇器斯辰,標(biāo)簽選擇器必須寫在最前面

hover 偽類選擇器

作用:選中鼠標(biāo)懸停在元素上的狀態(tài)舶担,設(shè)置樣式

選擇器語法:選擇器:hover { css }

注意點(diǎn):1. 偽類選擇器選中的元素的某種狀態(tài)

emmet 語法

舉例:

背景相關(guān)屬性

背景圖片

屬性名:background-image(bgi)

屬性值:background-image:url(‘圖片的路徑’)

注意點(diǎn):1. 背景圖片中 URL 中可以省略引號

2. 背景圖片默認(rèn)是在水平方向和垂直方向平鋪的

3. 背景圖片僅僅是指給盒子起到裝飾效果,類似于背景顏色彬呻。

背景平鋪

屬性名:background- repeat(bgr)

屬性值:

repeat 水平垂直都平鋪

no-repeat 不平鋪

repeat-x:沿水平方向(x 軸)平鋪

repeat-y:沿垂直方向(y 軸)平鋪

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末柄沮,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子废岂,更是在濱河造成了極大的恐慌,老刑警劉巖狱意,帶你破解...
    沈念sama閱讀 219,427評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件湖苞,死亡現(xiàn)場離奇詭異,居然都是意外死亡详囤,警方通過查閱死者的電腦和手機(jī)财骨,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,551評論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來藏姐,“玉大人隆箩,你說我怎么就攤上這事「嵫睿” “怎么了捌臊?”我有些...
    開封第一講書人閱讀 165,747評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長兜材。 經(jīng)常有香客問我理澎,道長,這世上最難降的妖魔是什么曙寡? 我笑而不...
    開封第一講書人閱讀 58,939評論 1 295
  • 正文 為了忘掉前任糠爬,我火速辦了婚禮,結(jié)果婚禮上举庶,老公的妹妹穿的比我還像新娘执隧。我一直安慰自己,他們只是感情好户侥,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,955評論 6 392
  • 文/花漫 我一把揭開白布镀琉。 她就那樣靜靜地躺著,像睡著了一般蕊唐。 火紅的嫁衣襯著肌膚如雪滚粟。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,737評論 1 305
  • 那天刃泌,我揣著相機(jī)與錄音凡壤,去河邊找鬼署尤。 笑死,一個胖子當(dāng)著我的面吹牛亚侠,可吹牛的內(nèi)容都是我干的曹体。 我是一名探鬼主播,決...
    沈念sama閱讀 40,448評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼硝烂,長吁一口氣:“原來是場噩夢啊……” “哼箕别!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起滞谢,我...
    開封第一講書人閱讀 39,352評論 0 276
  • 序言:老撾萬榮一對情侶失蹤串稀,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后狮杨,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體母截,經(jīng)...
    沈念sama閱讀 45,834評論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,992評論 3 338
  • 正文 我和宋清朗相戀三年橄教,在試婚紗的時候發(fā)現(xiàn)自己被綠了清寇。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,133評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡护蝶,死狀恐怖华烟,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情持灰,我是刑警寧澤盔夜,帶...
    沈念sama閱讀 35,815評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站堤魁,受9級特大地震影響比吭,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜姨涡,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,477評論 3 331
  • 文/蒙蒙 一衩藤、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧涛漂,春花似錦赏表、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,022評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至悠轩,卻和暖如春间狂,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背火架。 一陣腳步聲響...
    開封第一講書人閱讀 33,147評論 1 272
  • 我被黑心中介騙來泰國打工鉴象, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留忙菠,地道東北人。 一個月前我還...
    沈念sama閱讀 48,398評論 3 373
  • 正文 我出身青樓纺弊,卻偏偏與公主長得像牛欢,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子淆游,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,077評論 2 355

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

  • 一傍睹、Emmet語法 Emmet語法的簽屬是Zen coding,它使用縮寫犹菱,來提高h(yuǎn)tml/css的編寫速度拾稳。 1...
    西紅柿君吶閱讀 345評論 0 0
  • 1. CSS樣式表 CSS(Cascading Style Sheets),通常稱為CSS樣式表或?qū)盈B樣式表(級聯(lián)...
    Imkata閱讀 849評論 0 0
  • 一腊脱、emmet 語法 emmet 語法快速生成 css 樣式 1.如何設(shè)置寬高访得? w100→width: 100p...
    風(fēng)來_閱讀 508評論 0 0
  • CSS(層疊樣式表) 簡介 CSS是一種標(biāo)記語言 CSS主要用于設(shè)置HTML網(wǎng)頁中的文本內(nèi)容(字體、大小虑椎、對齊方式...
    最后的輕語G閱讀 479評論 0 0
  • CSS層疊樣式表 CSS(Cascading Style Sheets) ,通常稱為CSS樣式表或?qū)盈B樣式表(級...
    魚來魚往0709閱讀 254評論 0 0