将CSS样式应用于嵌套列表根元素中的第一个<li>。

Question

我想仅应用于第一个li元素的CSS样式，但是:first-child选择器将应用于每个ul的所有第一个子元素。

这是我的代码。

#menu-navigation li:first-child{
   color:red;
}​

当应用于此HTML时：

<ul class="nav" id="menu-navigation">
    <li>Home</li>
    <li>About Us
        <ul>
            <li>Our Team</li>
        </ul>
    </li>
</ul>​

当同时单击“主页”和“我们的团队”时，它们都会变成红色。

- Jassi Oberoi

---

在这里检查标题：http://www.w3schools.com/cssref/sel_firstchild.asp - Jassi Oberoi

-sigh- 你刚刚被W3Fooled了。:first-child是一个伪类，而不是一个伪元素。（我不总是发W3Fools的评论，但有时候它们是绝对必要的）。 - BoltClock

伪类（pseudo-classes）如 li:first-child 选择第一个子元素是 li 的元素。（这类似于类 - li.first 选择一个 li，如果它的类列表包含 "first"）。伪元素（pseudo-elements）描述了要选择的元素的不同块。例如，span:first-letter 创建一个新的块，包围 span 元素的第一个字母，然后选择该块。 - Gareth

请注意，在CSS3中，伪元素应该使用双冒号进行分隔(li::first-letter)，但是对于在CSS2中定义的伪元素(:first-line, :first-letter, :before 和 :after)，这是可选的。这可能是许多混淆的根源。 - Gareth

@Gareth 谢谢你提供的信息。 - Jassi Oberoi

Answer 1

使用子选择器：

使用子元素选择器：

#menu-navigation>li:first-child{
   color:red;
}​

例如：http://jsfiddle.net/w47LD/3/

- BiAiB

---

我在我的代码中尝试了它，但没有显示红色，你是否应用到我的代码中？ - Jassi Oberoi

@Jassi，请查看我在这个答案中添加的fiddle；只有“Home”是红色的。如果您的情况不是这样的，那么您使用的是什么浏览器？IE6？ - Phrogz

@Jassi 在 Windows 7 上的 FF12 中看起来对我来说是“正确”的。当我查看此答案中的链接时，只有“主页”是红色的。 - Phrogz

Answer 2

直接使用id/class不是更容易吗？

<li class="red"> Our Team </li>

.red
{
  color: red;
}



Alternatively you could use an ID...



<li id="red"> Our Team </li>

#red
{
  color: red;
}

- Mike

---

迈克，这样的解决方案违背了 CSS 的理念和保持样式与格式分离的原则。如果有一种在不添加额外 HTML 的情况下应用更改到一堆标签的解决方案，那就应该选择那条路线。 - magzalez