css定位，class属性之间有空格与无空格的区别

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

中间有空格的情况

是选择到.class1类下的.class2类子节点，即.class2类的节点要是.class1类子节点

 <style>

    .class1 {

        color: black;

    }

    .class1 .class2 {

        color: red;

    }

    </style>

<body>

<div class="class1">

    I'm class1

    <div class="class2">I'm class2,son of class1</div>

</div>

</body>

结果：

中间无空格情况

是选择到同时拥有.class1和.class2的节点

 <style>

        .class1 { color: black; }

        .class1 .class2 { color: red; }

        .class1.class2 { color: blue; }

 /*注意优先级，.class1 .class2的优先级比.class1.class2高，.class1 .class2写在.class1.class2后，.class1.class2会被覆盖*/

</style>

<body>

<div class="class1">

    I'm class1

    <div class="class2">I'm class2,son of class1</div>

    <div class="class1 class2">I'm class1class2,son of class1</div>

</div>

</body>

结果：