CSS復合選擇器


一、為什么學習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個元素    因為偽類選擇器更多,比如鏈接偽類,結構偽類等。

 

 

七、復合選擇器總結

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM