主动：firstchild造型

Question

我正在以不同颜色着色菜单的第一个元素（via：firstchild pseudo）。但是，第一个元素有时是隐藏的（通过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;
}

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

Demo