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。

巴特西

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

最新文章

热门文章

巴特西

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

最新文章

热门文章

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