用$("ol :last-child")时，除了第一个li的橘子，其它都加了背景色了，这是为什么？

<!DOCTYPE html>
<html>
    <head>
        <title>:last-child子元素过滤选择器</title>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
        <link href="style.css" rel="stylesheet" type="text/css" />

   </head>
    
    <body>
        <h3>改变每个"蔬菜水果"中最后一行的背景色</h3>
        <ol>
            <li>芹菜</li>
            <li>茄子</li>
            <li>萝卜</li>
            <li>大白菜</li>
            <li>西红柿</li>
        </ol>
        <ol>
            <li>橘子</li>
            <li>香蕉</li>
            <li>葡萄</li>
            <li>苹果</li>
            <li>西瓜</li>
        </ol>
        
        <ol>
            <li>橘子</li>
            <li>香蕉</li>
            <li>葡萄</li>
            <li>苹果</li>
            <li>西瓜</li>
            <h6>最后一个</h6>
        </ol>
           
        <script type="text/javascript">
         //  $("li:last-child").css("background-color", "blue");
         $("ol :last-child").css("background-color", "blue");
        </script>
    </body>
</html>

当然，如果$("ol :last-child")里面指定li或者h6除外。

雨宮奏

浏览 1392回答 3

3回答

淡雅的默

代码不全，看不出来，样式不贴出来什么鬼；根据提供的内容，如果网页只有一个ol，那么正确的应该是把Ol的背景变成蓝色，而不是H6标签，但是你给了这么一点代码，直接是给了h6的背景

qq_袁佳清_0

你的这个情况我之前也遇到了，不过我用的是frist-child 。 li:last-child 不能选最后一个<li>西瓜</li>，应该是代码把h6也当成 li 标签了，而你给 li 加样式，并没有给h6加所以不显示背景。你可以把h6放中间，用 eq() 或者 nth-child() ,用个数的方式去选，它会占一位，但是前面给 li 加样式，它就不能显示

qq_袁佳清_0

我试着是正常的， <li>西红柿</li> <li>西瓜</li> <h6>最后一个</h6> 这些加了背景

随时随地看视频慕课网APP