如何在一个元素上使用两个类

Question

我有以下两个CSS组件：

#enableScrolling {
    overflow-y: scroll;
    height: 100vh;
}

#grey {
    background-color: #F0F0F0 !important;
}

我想在HTML标记中一起使用它们。

我想做这样的事情：

#greyScrolling {
    .enableScrolling
    .grey
}

否则，我想直接将它们放在标签中，如下所示：

<div id='enablescrolling' ???='grey>

如何组合这两个组件？

Answer 1

您可以使用类而不是id：

.enableScrolling {
    overflow-y: scroll;
    height: 100vh;
}

.grey {
    background-color: #F0F0F0 !important;
}

然后将它们添加到div：

<div class="enableScrolling grey"></div>

Answer 2

使用类名而不是ID，并将CSS声明组合在一个类中：

HTML：

<div class="class-name">

CSS：

.class-name {
    overflow-y: scroll;
    height: 100vh;
    background-color: #F0F0F0 !important;
}

Answer 3

改为让他们成为两个班级;

.enableScrolling {
     overflow-y:scroll
     height: 100vh;
}

.grey {
    background-color: #F0F0F0 !important;
}

然后致电

<div class="enableScrolling grey> Content ... </div>

这是有效的，因为元素可以同时包含许多类。您当前的样式设置为ID，根据“规则”，元素只能有1 ID，而ID每页只能使用一次。