无法让最后一个孩子在我的CSS中工作

Question

我正在尝试使用此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;
}

Answer 1

h3:last-child表示"类型为'h3'的元素,它是其父元素的最后一个子元素".它并不意味着"其父级中'h3'类型的最后一个元素".既然你有一个div在你之后h3,那h3不是最后一个孩子.

你要 :last-of-type