如何获得第一个特定元素的孩子？

Question

这个问题看起来很简单，但是我无法解决这个问题。

我有以下简单的标记。

<div id="left_pane">
<ul>
<div id="indicator"></div>
<li>Something</li>
<li>Something else</li>
</ul>
</div>

如何从列表中选择li元素中的第一个项目？ （即不是div）。

我尝试了很多不同的方式......就像这样

#left_pane ul:first-child li {
    /* style */
}

#left_pane li:first-child {
    /* style */
}

但我似乎无法做任何事情。

Answer 1

要获得其类型的第一个元素而不考虑其他类型的不同元素，通常使用:first-of-type CSS3伪类。

但是，在这里，首先将div作为ul的孩子并不是有效的HTML，因此您应该将内部div移出。然后根据您的第二条规则使用:first-child就足够了，因为ul只能将li元素作为子元素使用：

#left_pane li:first-child {
    /* style */
}