使用CSS选择类下面的类

Question

我正在尝试选择一个类下面的类，比如我在一个元素上有一个名为“A”的类，在它下面，我有另一个类名为“B”的元素。

DOM中还有其他“B”实例，但是没有一个只有一个在“A”下。

要仅选择“A”下的“B”，我会使用：

.A B {

CSS HERE

}

或者我做错了吗？

这是结构：

<h2 class="A">
<span>TITLECONTENT</span>
</h2>
<p>CONTENT</p>
<div class="B" addthis:title="TITLECONTENT " addthis:url="URL">

Answer 1

不，你忘记了点，

.A .B {

}

（假设你的意思是你的html是这样的：）

<div class="A">
   <div class="B"></div>
</div>

每当您引用一个类时，都使用. 每当您引用ID时，都使用# 每当您引用标记名称时，都不使用前缀，例如div {}

使用您需要的最少specificity来定位不同的元素

定位具有多个类的元素，您追加第二个类没有空格：.one.two

定位后代元素包含空格：.one .descendant

Answer 2

最常见的形式是

.A .B { ... }

这将针对任何具有类A的父类的B类元素，无论它是否是直接父元素：

<span class="B">
    <span class="A" >
    </span>
</span>

以及

<span class="B">
    <div>
        <span class="A" >
        </span>
    <div>
</span>

---

如果.B是.A的直接子女，您可以使用此作为目标：

.A > .B { ... }

CSS Child selector

Answer 3

几乎是正确的。 你必须这样做

.A .B＆lt; - 请注意B之前的点。

另外，如果将来你需要同时选择一个同时包含B和B的元素，你可以这样做：

.A.B

会以div class =“A B”为目标，但不会以div class =“A”为目标，也不会以div class =“B”为目标

Answer 4

您忘记了一个点，但如果您想要所有直接位于A类元素下的B类元素，请使用大于号。所以A必须是B的直接父母。

.A > .B {
    /* CSS here. */
}