CSS中的 ','、'>'、'+'、'~'


, (群組選擇器)

A , B{
    
}

>(子元素選擇器)

//選擇A的一代B元素
A > B{
    
}

總結:“>”是css3中特有的選擇器,A B選擇所有后代元素,為A>B只選擇一代。

+ (相鄰兄弟選擇器)

//設置的是緊跟在A元素后的B元素,指定元素的下一個元素
A + B{
    
}
 
//設置列表中的第二個及后面的li,但第一個列表項不受影響、相同父元素、緊跟在其后
li + li{
    
}

~(兄弟選擇器)

//A之后的所有B元素,不一定要緊跟在A后面、相同父元素
A ~ B{
    
}

空格 (后代選擇器)

//選擇A所有的后代B元素
A B{
    
}

選擇器:

nth-last-of-type() 只匹配指定的標簽類型
nth-last-child() 不管標簽類型
屬性選擇器:*[title] {color:red;} //包含標題(title)的所有元素變為紅色
后代選擇器:div.sidebar {background:blue;}
子元素選擇器:h1 > strong {color:red;}
相鄰兄弟選擇器:h1 + p {margin-top:50px;} //緊接在 h1 元素后出現的段落

 


免責聲明!

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



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