2

我目前正在用不同的颜色为菜单的第一个元素(通过 :firstchild 伪)着色。但是,有时会隐藏第一个元素(通过 display:none),我希望对活动的第一个元素进行着色。

我原以为隐藏的元素不会被算作第一个孩子,但看起来它们仍在通过 :firstchild 伪设置样式。

在这种情况下我能做什么?

4

1 回答 1

4

做这样的事情:

<ul>
    <li class="hidden">Menu Item 1</li>
    <li>Menu Item 2</li>
    <li>Menu Item 3</li>
    <li>Menu Item 4</li>
</ul>

li:first-child {
    color: red;
}

.hidden {
    display: none;
}

.hidden + li {
    color: red;
}

通过添加类来隐藏元素,并使用相邻的子选择器 ( +) 设置第二个元素的样式。

演示

于 2013-04-27T21:23:31.000 回答