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

与>别名相同的方式子选择器选择直接子节点,即:

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

现在让我们假设您要将它应用于单个元素,所有您需要做的就是删除这些选择器之间的空格,如下所示:

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

这种风格将匹配此标记

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