私はHTMLコードの下にいるとしましょう。ここでは、外側のdivの<a>要素タグを#my_div_1に変更するだけです。外側のdivのみの特定の要素タグすべてのCSSスタイルを変更するにはどうすればよいですか？

HTML：

<style> 
#my_div_1 a{ 
    color: red; 
} 
</style> 

<div id="my_div_1"> 

    <a href="#">change the colour </a><br> 
    <a href="#">change the colour </a><br>  
    <b> Not change my colour</b><br>    

    <div id="my_div_2"> 
     <a href="#">Not change my colour </a><br> 
     <a href="#">Not change my colour </a><br> 
    </div> 

    <a href="#">change the colour </a> <br>   
    <b> Not change my colour</b> <br>    

    <div id="my_div_3"> 
     <a href="#">Not change my colour </a><br> 
     <a href="#">Not change my colour </a><br>   
    </div> 

    <a href="#">change the colour </a> <br> 
    <b> Not change my colour</b> <br>  
</div>

しかし、出力は次のようになります。

私が間違ってやっているところに私を修正してください。ありがとう！

出典

2017-09-19 Rajesh Chaudhary

-1

このように使用します。 the immediate children or child combinatorため

<html> 
 
<body> 
 

 
<style> 
 
#my_div_1 > a{ 
 
    color: red; 
 
} 
 

 

 
</style> 
 
<div id="my_div_1">    
 
    <a href="#">change the colour </a><br> 
 
    <a href="#">change the colour </a><br>  
 
    <b> Not change my colour</b><br>    
 

 
    <div id="my_div_2"> 
 
     <a href="#">Not change my colour </a><br> 
 
     <a href="#">Not change my colour </a><br> 
 
    </div> 
 

 
    <a href="#">change the colour </a> <br>   
 
    <b> Not change my colour</b> <br>    
 

 
    <div id="my_div_3"> 
 
     <a href="#">Not change my colour </a><br> 
 
     <a href="#">Not change my colour </a><br>   
 
    </div> 
 

 
    <a href="#">change the colour </a> <br> 
 
    <b> Not change my colour</b> <br>  
 
</div> 
 

 
</body> 
 
</html>

出典

2017-09-19 06:45:48

使用>。それは前に、それはすべての子孫<a>（基本的にすべての<a>が#my_div_1内にネスト）CSSで

Combinators

を選択したとして、コンビネータは、あなたが他の内部要素を選択することを可能にする、あなたが一緒に複数のセレクタを組み合わせることができますまたは他の要素に隣接して配置される。 4 ^✎可能なタイプは次のとおりです。

から^✎私たちの最大の関心事は、兄弟の子孫ではないので、最後の2が除外されています。

子孫セレクタ - （空間） - ダイレクト子孫必ずしも（他の要素の中のどこかにネストされた要素を選択することができ、それがために、孫^✎かもしれません例）

^✎これは、用語「直接の子孫は」以来、「直接の子」の別名である意味孫は明らかに子供よりも一歩先の子孫です。

子セレクタ - >は - あなたが別の要素の直接の子ある要素を選択することができます。

＆hellip;

--MDN - Simple Selectors - Combinators

<html> <body> <style> #my_div_1 > a{ color: red; } </style> <div id="my_div_1"> <a href="#">change the colour </a><br> <a href="#">change the colour </a><br> <b> Not change my colour</b><br> <div id="my_div_2"> <a href="#">Not change my colour </a><br> <a href="#">Not change my colour </a><br> </div> <a href="#">change the colour </a> <br> <b> Not change my colour</b> <br> <div id="my_div_3"> <a href="#">Not change my colour </a><br> <a href="#">Not change my colour </a><br> </div> <a href="#">change the colour </a> <br> <b> Not change my colour</b> <br> </div> </body> </html>

出典

2017-09-19 06:46:52 zer00ne

「子コンビネータ」です。 HTML内のすべての子孫は直接です。何年も前のコンビネータであることを記述するためにセレクタを使用したのは、数年前の仕様から落とされました。 – Quentin

@Quentin私はちょうど私がリンクを掲示していたので編集しました、頭のためにありがとう。 – zer00ne

@Quentinは、「直接の子孫」を「直接の子」に置き換えました。あなたは正しい "直接子孫"はすべてのネストされた ''に対して簡単に誤解される可能性があります。 – zer00ne

-1

使用#my_div_1 > a

#my_div_1 > a{ 
 
    color: red; 
 
}

<div id="my_div_1">    
 
    <a href="#">change the colour </a><br> 
 
    <a href="#">change the colour </a><br>  
 
    <b> Not change my colour</b><br>    
 

 
    <div id="my_div_2"> 
 
     <a href="#">Not change my colour </a><br> 
 
     <a href="#">Not change my colour </a><br> 
 
    </div> 
 

 
    <a href="#">change the colour </a> <br>   
 
    <b> Not change my colour</b> <br>    
 

 
    <div id="my_div_3"> 
 
     <a href="#">Not change my colour </a><br> 
 
     <a href="#">Not change my colour </a><br>   
 
    </div> 
 

 
    <a href="#">change the colour </a> <br> 
 
    <b> Not change my colour</b> <br>  
 
</div>

出典

2017-09-19 06:47:48

の場合あなたは、CSSコードを使用すると、divの持つIDの下に来るタグを固定するためにスタイルを適用することを伝えるために>を使用する必要があるので、＃1 my_div_1後に来るすべてのタグに適用されます、その後>を使用することはありません＃my_div_1

次のコードを確認してください。

#my_div_1 > a { color: red; }

出典

2017-09-19 08:31:33

外側のdivのみの特定の要素タグすべてのCSSスタイルを変更するにはどうすればよいですか？

答えて

Combinators

関連する問題