html - 如何获得特定元素的第一个 child ？

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