html - 活跃：firstchild 造型

Question

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

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

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

Answer 1

做这样的事情：

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

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

演示