html - 另一个类中的类前缀选择器

Question

我想知道下面示例的正确选择器是什么

<span class="A">
   <span class="B_C"></span>
   <span class="B_D"></span>
<span>

我想选择所有以B_嵌套在A. 我已经尝试了其中的每一个，但都没有奏效：

.A + [class^="B_"], .A + [class*=" B_"]
.A > [class^="B_"], .A > [class*=" B_"]
.A [class^="B_"], .A [class*=" B_"]

Answer 1

一个 Element 可以有多个类，因此如果您只按类选择，则可以更容易：

<span class="A">
   <span class="class_b class_c"></span>
   <span class="class_b class_d"></span>
<span>

您可以选择所有具有b：

.A .class_b

Answer 2

.A [class^="B_"]作品。通常，您会将该属性选择器与另一个元素放在一起，例如.A span[class^="B_"]（也可以）。

演示：

输出：

CSS：

.A [class^="B_"] {
    color: red;
}

HTML：

<span class="A">
   <span class="B_C">B_C</span>
   <span class="B_D">B_D</span>
   <span class="C_D">C_D</span>
<span>