HTML。将具有子类的多个类分配给一个元素

Question

我正在努力处理 HTML 类。我在 CSS 中有这些类:

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

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

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

但是这些都不起作用，元素只继承了“a”类。我认为从逻辑上讲，第二类必须以绝对方式分配，例如:

<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 中选择器之间的空格表示 Descendant selector

以同样的方式你有 > 别名 Child selectors选择直接 child 即:

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

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

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

此样式将匹配此标记

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