美文网首页
css中“~“、“>“、“.“、“空格“、”+“等特殊符号的含义

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

作者: 迷失的信徒 | 来源:发表于2022-06-30 10:38 被阅读0次

    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

    相关文章

      网友评论

          本文标题:css中“~“、“>“、“.“、“空格“、”+“等特殊符号的含义

          本文链接:https://www.haomeiwen.com/subject/fyztbrtx.html