復(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 軸)平鋪