的HTML

Question

<html>
<head>
<style type="text/css">
    .hori {
    color:red;
    }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
        $('#car :first-child').addClass('hori');
});
</script>
</head>
<body>
    <ul id="car">
        <li>Honda
            <ul>
                <li>Jazz</li>
                <li>Freed</li>
                <li>CRV</li>
                <li>Oddesey</li>
            </ul>
        </li>
        <li>Nissan
            <ul>
                <li>Grand Livina</li>
                <li>Livina X-gear</li>
                <li>X-Trail</li>
            </ul>
        </li>       
        <li>Toyota
            <ul>
                <li>Fortuner</li>
                <li>Prius</li>
                <li>Innova</li>
            </ul>       
        </li>       
    </ul>
</body>
</html>

问题：

我想把class：hori（制作红色）放到这个列表中：

        <li>Honda
            <ul>
                <li>Jazz</li>
                <li>Freed</li>
                <li>CRV</li>
                <li>Oddesey</li>
            </ul>
        </li>

所以我使用$('#car :first-child').addClass('hori');但输出不是我想要的。除日产和丰田外，所有文本都变成红色。那么css选择器代码有什么问题？

Answer 1

#car :first-child选择每个元素，它是#car元素中任何内容的第一个子元素。

要仅选择第一个<li>，请改用：

$('#car > :first-child').addClass('hori');

>将确保只选择#car的直接后代。

当然，你并不真正需要jQuery，因为这也可以在CSS中完成。

Answer 2

你需要准确地告诉哪个第一个孩子，请看jsfiddle，我已经改变了html一点

的HTML

<ul id="car">
    <li><span>Honda</span>
            <ul>
                <li>Jazz</li>
                <li>Freed</li>
                <li>CRV</li>
                <li>Oddesey</li>
            </ul>
        </li>
    <li><span>Nissan</span>
            <ul>
                <li>Grand Livina</li>
                <li>Livina X-gear</li>
                <li>X-Trail</li>
            </ul>
        </li>       
    <li><span>Toyota</span>
            <ul>
                <li>Fortuner</li>
                <li>Prius</li>
                <li>Innova</li>
            </ul>       
        </li>       
    </ul>

的CSS

.hori { color:red;}
.tori {color:green;}
.lori {color:blue;}

JS

$(document).ready(function() {
       $('#car li>:first-child').addClass('lori');
        $('#car >:first-child').addClass('hori');
        $('#car li > ul > li:first-child').addClass('tori');
});

在jquery中使用'first-child'选择器的问题

2 个答案:

的HTML

的CSS

JS