经常看见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。