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>