にはlink要素が2つありますが、2番目の要素にはCSSが付加されません。 _html/css_WEB-ITnoseの書き方

080b747a20f9163200dd0a7d304ba388
.test h3 a {background-color: #FF0000;}
531ac245ce3e4fe3d50054a55f265927 410e38985a3c1e8b5219c50cd6add5b9 ;ee7959cc8dd4be16ef633321c03dac32abc5db79b134e9f6b82c0b36e0489ee08ed には 2 つのリンクがあります。最初のリンクにのみ背景色を追加したいのですが、2 番目のリンクにはスタイルがありません。



返信 ディスカッション (解決策)

<style type="text/css">.test h3 a:first-child {background-color: #FF0000;}</style><div class="test"><H3><a href="#">abc</a>  <a href="#">123</a></H3></div>

E

ちなみに、2番目をお選びいただければ幸いです。

<style type="text/css">.test h3 a.first {background-color: #FF0000;}</style><div class="test"><H3><a href="#" class="first">abc</a>  <a href="#">123</a></H3></div>

<style type="text/css">.test h3 a:first-child {background-color: #FF0000;}</style><div class="test"><H3><a href="#">abc</a>  <a href="#">123</a></H3></div>

また: first-child と .first がそれぞれ使用される場合。ありがとうございます

CSSセレクターリファレンス
2番目を選択します

<style type="text/css">.test h3 a.first {background-color: #FF0000;}</style><div class="test"><H3><a href="#" class="first">abc</a>  <a href="#">123</a></H3></div>

通常、2番目のものにクラスを追加してスタイルを設定します

<style type="text/css">.test h3 a:first-child {background-color: #FF0000;}</style><div class="test"><H3><a href="#">abc</a>  <a href="#">123</a></H3></div>

<style type="text/css">.test h3 a.first {background-color: #FF0000;}</style><div class="test"><H3><a href="#" class="first">abc</a>  <a href="#">123</a></H3></div>

divが2つネストされている場合、効果がないようです例:

080b747a20f9163200dd0a7d304ba388
.test1.test2 h3 a:first-child {background-color: #FF0000;}
.test1_2.test2 h3 {背景色: #EFEFEF;}
531ac245ce3e4fe3d50054a55f265927

48e30d1888c19161e801f83a47bac733
9d67e4fe87d770f037d88ca428ebdecedf5d37e1f1467d49bd6f9a271ae00d1babc5db79b134e9f6b82c0b36e0489ee08ed f0e5186af014e8be5b0b710c674a05ef1235db79b134e9f6b82c0b36e0489ee08ed036fe202a55b5e84ed42b72960fef91d
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
59027b8837e0f0deb1dfc88b9024737f
48e30d1888c19161e801f83a47bac733 7c5a5c04c2790194070806e71c9bb450abc5db79b134e9f6b82c0b36e0489ee08ed a href ="#" name="2">1235db79b134e9f6b82c0b36e0489ee08ed036fe202a55b5e84ed42b72960fef91d
16b28748ea4df4d9c2150843fecfba68
質問が多すぎます。 (これは自動的にループされるリストなので、DIV が 2 つネストされており、外側の DIV は異なります)

<style type="text/css">.test h3 a:nth-child(2) {background-color: #FF0000;}</style>  <div class="test"><H3><a href="#">abc</a>  <a href="#">123</a></H3></div>

<style type="text/css">.test h3 a:first-child {background-color: #FF0000;}</style><div class="test"><H3><a href="#">abc</a>  <a href="#">123</a></H3></div>

問題を解決してください。投稿していただきありがとうございます。