Css3中的~ + , >详解

css3的>

css3特有的选择器，我们都知道A.B是所选A元素的所有B子元素

而A>B,选择A后面的一代(这里的一代指的是A下面的一级所有类标签，不是指一个)

举个栗子:

<style>
        .one>.box{
      
      
            width: 100px;
            height: 100px;
            background-color: aqua;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="one">
        <div class="box">//one的下一级
            <div class="box"></div>
        </div>
        <div class="box"></div>//one的下一级
        <div class="box"></div>//one的下一级
        <div class="box"></div>//one的下一级
    </div>
</body>

这里的**.one>.box** 选择的就是one的下一级所有的box，不包括下下一级，也可以理解为父类的子类，不包括孙子类

css3的,

,指的是同级(兄弟)的样式

<style>
        .box1,.box2,.box3,.box4{
      
      
            width: 100px;
            height: 100px;
            background-color: aqua;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="one">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </div>

指的就是同级的css样式

css3的+

这个+也是同级，但与,有点区别，它是相邻兄弟选择器，即元素之间必须相邻，比如A+B，B必须紧随着A，在A前面也不行，并且只会改变B的样式

<style>
        div{
      
      
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .box1+.box2{
      
      
            width: 100px;
            height: 100px;
            background-color: aqua;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="one">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </div>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IuyCqe5Q-1654129283486)(file:///D:\qq数据\281534758\Image\C2C\Image2\SJEL6@QHOC{2N%BM1Q$L%3P.png)]$

可以看到，只有.box2的样式发生了改变

css的~

A~B,选择A标签后面所有的B标签，

style>
        
        p~h1{
            background-color: red;
        }
        
    </style>
</head>
<body>
    <h1>我在前面不变色</h1>
    <p>在我后面全变色</p>
    <h1>我在后面变色</h1>
    <h1>我也变</h1>
    <h2>我不变</h2>
    <p><h1>变</h1></p>
    
    



</body>

总结

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fk2PkyWu-1654129283487)(file:///D:\qq数据\281534758\Image\C2C\Image2\1X%H%CK]$3W`X6ADR1UTX}T.png)]$

A>B，就是A的后一代元素，即B C

A .B 就是选择A的后代所有元素，也就是B C D E F

D ,E,F,选择同一级兄弟节点，D E F

D+E，选择同级E

1654129283487)]