代码之家 › 专栏 › 技术社区 › ProtectedVoid

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

css-specificity class css html

1

ProtectedVoid · 技术社区 · 11 年前

我正在努力学习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中保持特定性)。

2 回复 | 直到 11 年前

1

5

Gildas.Tambo 11 年前

如果要在标记上使用此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 选择直接子项,即:

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

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

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

此样式将与此标记匹配

<div class=“a b”></div>
<div class=“a c”></div>

2

Ulrich Schwarz 11 年前

“”的选择器同时具有两个类 a 和 b “是 .a.b ,所以中间没有空格。