css后代选择器 .属性 元素 与 元素.属性的区别

经常看见css的后代选择器是这样的写法：

div.class   和 .class div 的形式两者的区别：

div.class  是选中的类名为class 的div元素，与直接使用类选择器.class不同，因为可能有其他的元素使用了class类名，比如<p class=""></p>,就不会被div.class选中；

.class div 是后代选择器的一种，表示选中 类名为class的元素包含的所有的div元素；

代码演示：使用内联样式，方便查看；

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div.se {
                border: 1px dashed gray;
            }
            
            .se div {
                background-color: #008000;
            }
        </style>
    </head>

    <body>
        <div id="first" class="se">
            你好我是first
            <div class="se">woshi</div>
        </div>
        <div id="second" class="se">
            你好我是second
        </div>
        <p class="se">你好我是段落</p>
    </body>

</html>

效果：

可以看到：div.se 选中的是类名为"se"的div元素；而.se div选中的，类名为se的元素后代元素div。

 

posted @ 2017-08-08 14:35  恩恩先生  阅读(842)  评论(0)  编辑  收藏  举报