Html 当选择某个li时，如何更改该li之前或之后的CSS？

大家好

我想问一下，当选择一个li时，如何更改li之前或之后的CSS

例如，如果我选择3，我需要更改2和4的CSS

谢谢你的回答

您可以使用第n个子项

例：

li:n-child3:hover li:n-child2，li:n-child4{

颜色：红色

}

---

这是纯css，你的意思是用jquery选择，你基本上可以做同样的事情。

用css，我相信你可以通过这样做来选择下一个列表项。选择+li，但我不知道有什么好方法可以只用css选择上一个列表项

我会用mooTools来完成这个任务

document.getElement.select+li.setStyles{border:'1px solid 000'}

document.getElement'.select！+li'.setStyles{border:'1px solid 000'}

---

这将设置围绕您的上一个和下一个列表项的样式。选择类。

您可以尝试以下操作：

<li><span class="item-label">1</span><li>
<li><span class="item-label">2</span><li>
<li class="selected"><span class="item-label">3</span><li>
<li><span class="item-label">4</span><li>
<li><span class="item-label">5</span><li>

现在创建样式，例如：

$('#menu li').click(function() 
{
    $(this).siblings('li').removeClass('active');
    $(this).addClass('active');
});

使用此方法，只有单击的li链接才会有class:active，它将与样式链接，并且class:active将从另一个li链接中删除

这里有一个工作演示：

---

希望这有帮助：

基本上相同的东西是什么意思？此外，如果OP的页面上有其他列表，这也不起作用。这不是OP所要求的。他想选择所选li的上一个和下一个元素。使用第n个child将非常难编码，他可以这样做。Jquery确实与第n个孩子一起工作，他可以这样做。3只是一个例子。也许我选择4，我需要改变3和5的CSS。我知道这是错误的。li.selected:nth-child-1.item标签{border bottom:3px solid 000；}当然，它必须比我写的更具动态性。如果你可以在这个项目上使用jquery，我认为会更好。没有：after或：before伪类，所以选择2或4的唯一方法是遵循Stephen的建议，或者自己给出2和4个类或ID。为什么你要在选择3时同时更改2和4的css？如果我允许在这个项目中使用jquery，我不会这样做。我正在工作的项目使用mootools，但还不知道任何mootools。看起来在mootools中它会是这样的。。。document.getElement.select+li'//选择下一个document.getElement.select！+li'//您可以使用.setStyles{border:'1px solid 000'，宽度：300，高度：400}链接它；非常感谢。我会努力弄清楚的。我调整了我的答案以适应mooTools。试试看。

#menu .active
{
    background:rgba(0,0,0,0.2);
    font-size:12px;
}