CSS - 色直接テキストのみ/他の子クラスに継承しない

私はすでに少なくとも何十回も質問されていることは知っています（少なくとも1ダースを見つけましたが）私の問題を解決しました。（！）CSS - 色直接テキストのみ/他の子クラスに継承しない

は、私はちょうどこれらの<h3>タグ内に直接であるテキストを色付けしたい：

<div class="page-header"> 
    <h3> I want this green <div class="page-header-button-group">But not this</div></h3> 
</div>

は注意してください：私はHTMLで何かを変更することはできません。私はこれを試みた：

.page-header > h3:first-child{ 
    color:green; 
}

しかし、それは悲しいことに私が必要なことをしていません。

2017-08-01 S. Tea

これはあなたに役立つでしょう。

h3 { 
 
    color: green; 
 
} 
 

 
h3>* { 
 
    /* all children of h3 */ 
 
    color: black; 
 
}

<div class="page-header"> 
 
    <h3> I want this green 
 
    <div class="page-header-button-group">But not this</div> 
 
    </h3> 
 
</div>

2017-08-01 13:08:11 Gerard

問題がcolorのデフォルト値が指定されていないと、その値は（w3schoolsを参照）親から継承されていること、です。つまり、<h3>の色を指定し、他の色規則を持たない<div>には色を継承します。

唯一の解決策は、各子供のための余分なルールで色をリセットすることです。 h3:first-child > *（h3の直接の子である要素）。

.page-header > h3:first-child{ 
 
    color:green; 
 
} 
 

 
.page-header > h3:first-child > * { 
 
    color: #000; 
 
}

<div class="page-header"> 
 
    <h3> I want this green <div class="page-header-button-group">But not this</div></h3> 
 
</div>

これはあなたのページに共通のものである場合は、例えば、クラスを考えること：.color-default { color: #000; }を（propably !importantを追加）。次に、divを<div class="default-color">と定義することができます。

2017-08-01 13:10:46 SVSchmidt

答えて