CSS中定义CLASS时，中间有空格和每空格的区别

最新推荐文章于 2022-09-14 16:37:40 发布

weixin_33781606

最新推荐文章于 2022-09-14 16:37:40 发布

阅读量177

点赞数

CC 4.0 BY-SA版权

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/shierfen/p/5342326.html

本文详细解析了CSS选择器的工作原理，特别是关于不同选择器之间的区别：连续类名选择器（如 .e1.e2）表示元素需同时拥有多个类名；而带有空格的选择器（如 .father .e3）则表示元素及其父辈的关系。通过具体的例子展示了如何使用这些选择器来精确地控制样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css选择器的格式，规定不带空格的选择条件之间是“且”关系，带空格的是“父子”关系，并且可以是非直接的“父子”关系

 1 <style>
 2 .e1.e2
 3 {
 4 background-color:yellow;
 5 }
 6 .father .e3
 7 {
 8 background-color:green;
 9 }
10 </style>
11 </head>
12 
13 <body>
14 <div class="father">
15 <p class="e1 e2">我住在 Duckburg。</p>
16 <p class="e3">我也住在 Duckburg。</p>
17 <div><p class="e3">他也住在 Duckburg。</p></div>
18 </div>
19 </body>