css，选择上一个锚点

Question

<ul class="list">
    <li><a href="">Text 1</a></li>
    <li><a href="">Text 2</a></li>
    <li><a href="" class="selected">Text 3</a></li>
</ul>

如何在不添加额外类的情况下选择 Text 2 的锚点？ （并且没有 JavaScript）

<style type="text/css">
    ul.list li a.selected ******{background-color:#000}
</style>

输出：

<li><a href="" style="background-color:#000;">Text 2</a></li>

Answer 1

Answer 2

第n个子选择器可以做到这一点。浏览器支持各不相同。

尝试：

ul.list li:nth-child(2) a { background:#000; }

参考：http://reference.sitepoint.com/css/pseudoclass-nthchild

Answer 3

您似乎正在寻找以前的同级选择器，不幸的是它不存在。请参阅这篇文章，了解有关可能性的有用链接。

Answer 4

我认为没有任何方法可以简单地选择第*个子元素。 （firstChild 元素除外，它允许您指定第一个子元素。）但您也可以一致地将编号 ID 分配给 li 元素，例如

<li id="1"><a href="">Text 1</a></li>
<li id="2"><a href="">Text 2</a></li>
<li id="3"><a href="">Text 3</a></li>

然后您可以使用 id 属性中的值来指定第 *th li 元素。所以你的CSS应该是

ul.list li[id="2"] a { background-color: #000; }

Answer 5

我找到了一个方法，试试这个：

.prev_item:has(+ .next_item) {
  color: red;
}

如果它是.next_item之前的兄弟，它会改变.prev_item的颜色；