CSS如何处理类名中的空格？类名写法差异的效果疑问

首先明确：.container{background:red;} 和 .containerbg-red{background:red;} 是完全不同的CSS选择器，两者没有任何等价关系，这就是后者无效的核心原因。

具体拆解：

• 当你给元素设置 class="container bg-red" 时，这个元素同时拥有两个独立的类名：container 和 bg-red，空格是类名的分隔符，用来区分多个不同的类。
• .container 这个选择器，匹配的是所有带有 container 类名的元素——你的元素正好有这个类，所以样式生效。
• .containerbg-red 是一个单独的类选择器，它匹配的是带有 containerbg-red 这个完整类名的元素，但你的元素根本没有这个类，自然不会应用这个样式。

额外补充：如果想写同时匹配container和bg-red两个类的选择器，应该写成 .container.bg-red（两个类名之间没有空格），这样才能选中同时拥有这两个类的元素。

内容的提问来源于stack exchange，提问作者yosaami