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

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

一个元素可以有多个类，所以如果你只是按类选择，你可以更容易：

<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>