css中“~“、“＞“、“.“、“空格“、”+“等特殊符号的含义

1、”~“的含义

        

            
张三
            
李四(我会改变)
            
王五(我会改变)
            

                
赵六(我不会改变，我们不是一个父亲)
                
田七(我不会改变，我们不是一个父亲)
            
        

.child11~.child12 {
        color: yellowgreen;
    }

效果如下

图片.png

在root1下存在多个child12，如果需要设置与child11平级的child12的相关属性的话，就可以用到.child11~.child12。

2、“＞“的含义(子代选择器 只选取一代)

            
阿里(>只有我是红色的)
            
阿里(>只有我是红色的)
            
腾讯
            

                
阿里(我没改变)
                
腾讯
                

                    
我是最里面的阿里
                
            
        

.child1 {
        color: green;
    }

    .root>.child1 {
        color: red;
    }

    .child3>.child1 {
        color: aqua;
    }

图片.png

如果没有.root>.child1和.child3>.child1的话上图中红色和青色的位置应该也会为绿色的，.root>.child1从上图我们也能大概看出它的意思就是root的下一层级当中的child1，至于里面层级是否还有child1，就不是我们需要关心的了。

3、”+“的含义(相邻选择器)

第一行
            
第二行
            
你有没有受影响呢
            
第三行
            
第四行
            
第五行
            
第六行

.child21+.child22 {
        color: #FF0000;
    }

图片.png

从上图结果中我们看出来.child21+.child22只改变了同级一定是相邻后一个child22的属性。

4、空格（如.a .b,.a .b 所有子代）

        

            
演示 .a .b 
            
大哥
            
二哥
            
三弟
            
你大爷的！
            

                
你会变吗
            
        

    .root3 .child31 {
        color: #d71345;
    }

图片.png

.root3 .child31注意中间有个空格，表示在root3节点下的所有child31子节点。

5、.a.b(串联选择器)

            
演示 .a.b 
            
大哥继承
            
二哥继承
            
三弟没有我
        

.child31.common {
        color: greenyellow;
    }

图片.png