码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-06-14 20:18:54      阅读:72      评论:0      收藏:0      [点我收藏+]

标签:div   节点   red   图片   子节点   info   的区别   src   color   

  • 中间有空格的情况
    是选择到.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>

结果:
技术图片

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

标签:div   节点   red   图片   子节点   info   的区别   src   color   

原文地址:https://www.cnblogs.com/Uni-Hoang/p/13126495.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!