Html 如何仅将第一个列表项的样式与未排序的列表项的样式不同

我有一个垂直菜单，就像你能看到的那样。问题是-我想要一个像header这样的东西。如你所见，我的结构如下：

<div id="wrap">
    <ul>
        <li class="first"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
</div>

我可以在顶部添加另一个项目，但我认为将第一个项目更改为看起来像页眉会更容易和适当。但是，如果我只是像在示例中那样添加一个类，那么最终输出是相同的，样式不会被覆盖。我可以用！这很重要，但这是最后的手段

---

即使它不是一个CSS吨，我想只改变一些东西和其他类似的宽度，例如，被留下来，因为他们是为所有其他元素。那我该怎么做呢？是否有更多类似CSS的方法，而不仅仅是添加！对我要覆盖的每个样式都很重要？

有两种替代方法可以实现这一点

备选案文1

使用li班的第一个孩子，这是ul的孩子

第一：第一个孩子

比如说,

备选案文2

使用li的第一个子项，该子项嵌套在其作为唯一标识符的主父项包装中。仅当您不想在li上首先使用该类时，才使用此替代项

李：第一个孩子

比如说,

希望这能有所帮助。

我会先尝试一下CSS选择器

---

您在所给示例中遇到的问题称为。请看一个工作示例

在不使用类的情况下，要设置列表的第一个元素的样式，我建议您使用

---

这些方法中有没有保留未被覆盖的样式？我是否必须再次设置宽度、高度和其他我希望与其他元素相同的内容？您只需要声明那些您希望使用这些方法更改的属性，保持现有属性不变，您可能已经声明了这些属性。-@Lerontanks对于提供的示例，很明显我应该使用pseudo类，这只是我第一次不得不这么做。

ul li.first:first-child{
    /* Your CSS Values. */
}

#wrap ul li:first-child{
/* Your CSS Values. */
}

li:first-of-type {
    ...
}

#wrap ul li:first-child {
    background: none;
    color: #000;
}