css选择器组合使用

1. 后代选择器(以空格分隔)

//html=======================

    

        
第一个p
        
第二个p
        
第三个p
    
//css=======================
div p {
background:red;
}
//div 后所有的p元素背景全是红色

2. 子元素选择器(以大于号分隔）

//html=======================

        

            
子元素里的p
        
        

            直系子1
        
        

            直系子2
        
    
//css=======================
.content2>p {
    background: yellow;
}
// 只有直系子1直系子2背景变黄

3. 相邻兄弟选择器（以加号分隔）

//html=======================
    

        我是相临元素1
    
    

        
我是内容
    
    

        我是相临元素2
    
    
我是相临元素3
    
我是相临元素4
    

        我是相临元素5
    
//css=======================
.content3+div {
    background: green;
}
//只有相临元素2变绿

4. 普通兄弟选择器（以破折号分隔）

//html=======================
    

        我是相临元素1
    
    

        
我是内容
    
    

        我是相临元素2
    
    
我是相临元素3
    
我是相临元素4
        
是我元素4-1
        
我是元素4-2
            
是我元素4-2-1
        

    

    

        我是相临元素5
    
//css=======================
.content4~div {
    background: blue;
}
// 只有 我的相临元素2、3、5、4-1、4-2-1颜色为蓝色

5. 多个类共用一个样式(以逗号分隔)

//html=======================

    
div内容
    
p内容
    span内容

//css=======================
.content5,.content6,.content7 {
    color:lawngreen;
}
//  三个元素里面的内容全是亮绿色

6. 多个元素有同一个类名如果改变当前元素当前类名的样式（以'.'连接）

//html=======================

        

            我是div标签1
        
        

            我是p标签
        
        

            我是div标签2
        
        
            我是span标签
        

//css=======================
div.content8 {
    color:lightblue;
}
//  只有div里面的字是亮蓝色