Question

我有一个垂直菜单，就像您可以看到HERE一样。事情是 - 我希望有像头一样的东西。如您所见，现在我的结构是：

<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>

我可以在<div class="menu-header">之上添加另一个<ul>，但我认为将第一个<li>项更改为标题会更容易和恰当。但是，如果我只是在示例中添加一个类，那么最终输出是相同的（样式不会被覆盖。我可以使用!important但这是最后的手段。

尽管它不是很多CSS我想只改变一些东西和其他东西（例如宽度），因为它们适用于所有其他元素。那我该怎么做呢？是否有更多类似于CSS的方法，而不仅仅是为我想要覆盖的每个样式添加!important？

Answer 1

有两种方法可以实现这一目标。

替代1。

使用li first-child

的孩子的first课程ul

ul li.first:first-child

对于实例，

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

替代2.

使用嵌套在其主要父first-child内的li #wrap（这是唯一标识符）。仅在您不想在first

上使用课程li时才使用此备用

#wrap ul li:first-child

对于实例，

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

希望这有帮助。

Answer 2

您给出的示例的问题称为specificity。看看here的工作示例。

不使用类，为了设置列表的第一个元素的样式，我建议您使用pseudo-class first-child。

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

Answer 3

我试试CSS选择器first-of-type。

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

http://www.w3schools.com/cssref/sel_first-of-type.asp

如何仅对未排序列表中的第一个列表项进行不同的样式设置

3 个答案: