2

このcssを使用して最後のh3要素に別の背景を適用しようとしていますが、なぜ機能しないのかわかりません。

#s5_accordion_menu h3:last-child {
 background-color:#000000!;
 }

これはhtmlです

<div id="s5_accordion_menu">
<div>

<h3 id='current' class='s5_am_toggler'><span class="s5_accordion_menu_left"><a class="mainlevel" href="/shooting-tips.html" >
<span>Shooting Tips</span></a></span></h3>
<div class='s5_accordion_menu_element' style='display: none; border:none; overflow: hidden; padding: 0px; margin: 0px'></div>
    <h3 class='s5_am_toggler'><span class="s5_accordion_menu_left"><a class="mainlevel" href="/stickhandling-tips.html" ><span>Stickhandling / Passing Tips</span></a></span></h3>
<div class='s5_accordion_menu_element' style='display: none; border:none; overflow: hidden; padding: 0px; margin: 0px'></div>
    <h3 class='s5_am_toggler'><span class="s5_accordion_menu_left"><a class="mainlevel" href="/skating.html" ><span>Skating Tips</span></a></span></h3>
<div class='s5_accordion_menu_element' style='display: none; border:none; overflow: hidden; padding: 0px; margin: 0px'></div>
    <h3 class='s5_am_toggler'><span class="s5_accordion_menu_left"><a class="mainlevel" href="/skating-2.html" ><span>Training Tips</span></a></span></h3>
<div class='s5_accordion_menu_element' style='display: none; border:none; overflow: hidden; padding: 0px; margin: 0px'></div>
    <h3 class='s5_am_toggler'><span class="s5_accordion_menu_left"><a class="mainlevel" href="/skating-3.html" ><span>Training Aid Drills</span></a></span></h3>
<div class='s5_accordion_menu_element' style='display: none; border:none; overflow: hidden; padding: 0px; margin: 0px'></div>
    <h3 class='s5_am_toggler'><span class="s5_accordion_menu_left"><a class="mainlevel" href="/skating-4.html" ><span>Product Reviews</span></a></span></h3>
<div class='s5_accordion_menu_element' style='display: none; border:none; overflow: hidden; padding: 0px; margin: 0px'></div>
    <h3 class='s5_am_toggler'><span class="s5_accordion_menu_left"><a class="mainlevel" href="/skating-5.html" ><span>HockeyShot Commercials</span></a></span></h3>
<div class='s5_accordion_menu_element' style='display: none; border:none; overflow: hidden; padding: 0px; margin: 0px'></div>
    <h3 class='s5_am_toggler'><span class="s5_accordion_menu_left"><a class="mainlevel" href="/skating-6.html" ><span>Contest - Promos</span></a></span></h3>
<div class='s5_accordion_menu_element' style='display: none; border:none; overflow: hidden; padding: 0px; margin: 0px'></div>

その最後のh3タグの異なる背景を取得する方法はありますか？

ちなみに、これは最初のh3タグで機能します。

#s5_accordion_menu div h3:first-child {
background-color:#000000;
}
4

2 に答える 2

10

h3:last-child「親の最後の子であるタイプ「h3」の要素」を意味します。「親のタイプ「h3」の最後の要素」を意味するものではありません。divあなたはあなたの後にを持っているのでh3、h3は最後の子供ではありません。

あなたが欲しい:last-of-type

于 2013-02-25T14:19:59.107 に答える
1

より具体的なものを使用したい場合は、 :nth-child(n)where"n"は要素番号、または のような関数を使用できます"(n + 1)"。

于 2013-02-25T14:26:03.553 に答える