一、為什么學習CSS復合選擇器?
CSS選擇器分為基礎選擇器與復合選擇器,但實際選擇器不能滿足實際開發,快速高效選擇標簽
1.目的是為了可以選擇更為精確的目標與標簽
2.復合選擇器由兩個或多個基礎選擇器,通過不同方式組合而成
二、后代選擇器(重點)
又稱包含選擇器
作用:用來選擇元素或元素子孫后代
其寫法就是,把外層標簽寫在前面,內層標簽寫在后面,中間空格分隔,先寫父親爺爺,在寫孫子
父級 子級{ 屬性:屬性值;屬性:屬性值;}
語法: .class h3 { color:red; font-size:12px;}
三、子元素選擇器
作用:子元素選擇器只能選擇作為某元素子元素(親兒子)的元素
其寫法就是把父級標簽寫在前面,子級標簽寫在后邊,中間跟一個>進行連接
語法:.class>h3 { color :red; font-size:14px; }
注意:這里的子兒子指親兒子 不包含孫子 重孫子之類
比如·:.demo>h3 { color:red; } 說明 h3 一定是demo 親兒子 demo 元素包含着h3
四、交集選擇器
條件:交集選擇器由兩個選擇器構成,找到的標簽必須滿足:既有標簽一的特點,也有哦標簽二的特點
比如:p.one 選擇的是:類名為.one 的 段落標簽 用的來說相對較少,不太建議使用
五、並集選擇器(重點)
應用:若某些選擇器定義的樣式完全相同,或部分相同,就可以利用並收集選擇器為它們定義相同CSS樣式
並集選擇器(CSS選擇器分組)是各個選擇器通過,連接而成的
六、鏈接偽類選擇器(重點)
其與類選擇器相區別,類選擇器是一個點 比如:.demo{} 而偽類 用2個點 就是冒號 比如:link{} 偽娘
作用:用於向某些選擇器添加特殊效果,比如給鏈接添加效果,比如可以選擇第一個,第n個元素 因為偽類選擇器更多,比如鏈接偽類,結構偽類等。
七、復合選擇器總結