HTML。将多个类和 sub类分配给一个元素

Question

我正在为 HTML class 挣扎。我在 CSS:

中有这些 classes

.a{}
.a .b{}
.a .c{}

我正在尝试将两个 classes 分配给这样的元素：

<div class="a b"></div>
<div class="a c"></div>

但是none这些工作，元素只继承了"a"class。我认为从逻辑上讲，第二个 class 必须以绝对方式分配，例如：

<div class="a (a b)"></div>

但是我找不到正确的方法。也许我想做的是愚蠢的，但我找不到另一种方法（在 CSS 中保持特异性）。

Answer 1

如果您想在标记中使用此 css

.a{}
.a .b{}
.a .c{}

改变

<div class="a b"></div>
<div class="a c"></div>

至

<div class="a">
   <div class="b"></div>
</div>
<div class="a">
   <div class="c"></div>
</div>

注：css中的space选择器的意思是Descendant selector

与您使用 > 别名 Child selectors 来选择直接子项的方式相同，即：

.a{}
.a > .b{}
.a > .c{}

现在假设您想将它应用于单个元素，您所要做的就是像这样删除这些选择器之间的 space：

.a{}
.a.b{}
.a.c{}

此样式将匹配此标记

<div class="a b"></div>
<div class="a c"></div>

Answer 2

"has both classes a and b" 的选择器是 .a.b，因此中间没有 space。

HTML. Assign multiple classes with subclasses to a element