1、”~“的含义

        <div class="root1">
            <div class="child11">张三</div>
            <div class="child12">李四(我会改变)</div>
            <div class="child12">王五(我会改变)</div>
            <div class="child14">
                <div class="child12">赵六(我不会改变，我们不是一个父亲)</div>
                <div class="child12">田七(我不会改变，我们不是一个父亲)</div>
            </div>
        </div>

.child11~.child12 {
        color: yellowgreen;
    }

效果如下

图片.png

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

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

<div class="root">
            <div class="child1">阿里(>只有我是红色的)</div>
            <div class="child1">阿里(>只有我是红色的)</div>
            <div class="child2">腾讯</div>
            <div class="child3">
                <div class="child1">阿里(我没改变)</div>
                <div class="child2">腾讯</div>
                <div class="veiw1">
                    <div class="child1">我是最里面的阿里</div>
                </div>
            </div>
        </div>

.child1 {
        color: green;
    }

    .root>.child1 {
        color: red;
    }

    .child3>.child1 {
        color: aqua;
    }

图片.png

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

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

<div class="child22">第一行</div>
            <div class="child21">第二行</div>
            <div class="child23">你有没有受影响呢</div>
            <div class="child22">第三行</div>
            <div class="child21">第四行</div>
            <div class="child22">第五行</div>
            <div class="child22">第六行</div>

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

图片.png

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

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

        <div class="root3">
            <h1>演示 .a .b </h1>
            <div class="child31">大哥</div>
            <div class="child31">二哥</div>
            <div class="child31">三弟</div>
            <div class="child32">你大爷的！</div>
            <div>
                <div class="child31">你会变吗</div>
            </div>
        </div>

    .root3 .child31 {
        color: #d71345;
    }

图片.png

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

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

<div class="root3 ">
            <h1>演示 .a.b </h1>
            <div class="child31 common">大哥继承</div>
            <div class="child31 common">二哥继承</div>
            <div class="child31">三弟没有我</div>
        </div>

.child31.common {
        color: greenyellow;
    }

图片.png