[分享]css两个类连着写中间有空格

在CSS中，我们经常会遇到两个类名需要连着写，并且中间需要用一个空格隔开的情况。这是因为某些元素需要同时具有两个类的样式，而CSS规则中使用空格符号来表示层级关系，因此需要使用“连写”方式。/ 举个例...

在CSS中，我们经常会遇到两个类名需要连着写，并且中间需要用一个空格隔开的情况。这是因为某些元素需要同时具有两个类的样式，而CSS规则中使用空格符号来表示层级关系，因此需要使用“连写”方式。

/*
举个例子，对于下面这个HTML代码：
*/
<div class="box red"></div>

/*
我们可以通过如下的CSS代码来同时对.box和.red这两个类名进行样式设置：
*/
.box.red {
    background-color: red;
    color: white;
}

/*
这里的点（.）表示类选择器，中间用空格符号分隔两个类名。由于.box和.red都是类名，所以它们连在一起写，表示同一个元素同时具有这两个类。

需要注意的是，两个类名连写的规则只适用于具有并列关系的类，如果类名之间存在层级关系，就不能使用连写方式，而需要用空格符号分隔开。

总的来说，两个类名连写是CSS中的一种常见写法，掌握这种写法能够方便地为元素同时设置多个类名所对应的样式。