Question

有没有办法可以从css中的活动链接中选择上一个链接？我想将特定样式应用于活动链接之前的链接，例如链接3是活动链接，所以我想设置链接2的样式：

<ul>
   <li><a href="#">link 1</a></li>
   <li><a href="#">link 2</a></li>
   <li class="active"><a href="#">link 3</a></li>
   <li><a href="#">link 4</a></li>
   <li><a href="#">link 5</a></li>
   <li><a href="#">link 6</a></li>
</ul>

我知道我可以轻松地在jquery中执行此操作，但我想知道是否可以在css中实现这一点。

这些链接彼此内联以制作网站的导航菜单

Answer 1

它的反直觉，但可以做到。

您需要反转您的项目并将它们向相反方向浮动，然后使用下一个兄弟邻接选择器。

Demo Fiddle

HTML

<ul>
    <li><a href="#">link 6</a>
    </li>
    <li><a href="#">link 5</a>
    </li>
    <li class="active"><a href="#">link 4</a>
    </li>
    <li><a href="#">link 3</a>
    </li>
    <li><a href="#">link 2</a>
    </li>
    <li><a href="#">link 1</a>
    </li>
</ul>

CSS

ul {
    display:inline-block; /* <-- disguise the float:right position change */
}
li {
    float:right; /* <-- re-reverse item ordering in DOM */
    display:inline-block;
}
li.active + li a {
    color:pink; /* <-- select the next sibling (which due to reversing the DOM elements is now the previous one */
}

在css中选择活动链接之前的链接

1 个答案:

Demo Fiddle