css - 子のhtml要素のスタイリング

Question

dom内のいくつかの子要素のスタイルを設定する必要がありますが、それらが特定の要素の子ではない場合に限ります。例として、このスパンのテキストを太字にする必要があります

<span class="a">
 <span class="b">
  <span class="c">
    bold this test
  </span>
 </span>
</span>

しかし、これではありません

<span class="a">
 <a class="SomeOtherclass">
  <span class="b">
   <span class="c">
    not bold
   </span>
  </span>
 </a>
</span>

出力を制御できないため、クラス名や構造を変更できません

score 7 · Accepted Answer

直系子孫セレクターを使いたい>。セレクターは、の直接の子孫 (つまり、子) である場合にのみa > b選択します。ba

.a > .b > .c {
    font-weight:bold;
}

score 0 · Accepted Answer

ダニエルは正しい

2番目のオプションが必要な場合

あなたはこれを行うことができます

.c{
font-weight:bold;
}

.SomeOtherclass .c{
font-weight:normal;
}

score 0 · Accepted Answer

特殊なケースのオーバーライドルールを設定できます。たとえば、次のようになります。

.c {
    font-weight: bold;
}

.SomeOtherClass .c {
    font-weight: normal;
}

通常のケースでは、a、b、c のネストが常にあるとは限らないと想定しています。これが、特定のケースを除いてこのルールを適用するよう求めている理由です。

score 0 · Accepted Answer

これのための最良の方法は

span.a>a.SomeOtherclass>span.b>span.c{
  font-weight: bold
}

これは、特定の親の特定のクラスにのみ適用されます。他の場合ではありません。

逆にするとこうなる

span.a>span.b>span.c{
  font-weight: bold
}

このDOMの階層の間に何か（任意のタグ）を追加した場合、適用されません。

これで十分です.. :)

score 0 · Accepted Answer

Child-of セレクターを使用できます...

例えば、

.a { /*Your Style*/ }
.a > .b { /*Your Style*/ }
.a > .b > .c { /*Your Style*/ }

5 に答える 5