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

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 */
}