html - 选择 li 之一时，如何更改 li 之前或之后的 CSS？

Question

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

大家好

I want to ask how I can change CSS for before or after of li when one of li is selected.

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

谢谢你的回答。

Answer 1

您可以使用第 n 个孩子。

前任 ：

li:nth-child(3):hover li:nth-child(2), li:nth-child(4) {

红色;

}

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

Answer 2

使用 CSS，我相信您可以通过 .select + li 选择下一个列表项，但我不知道仅使用 CSS 选择上一个列表项的好方法。

我会用 mooTools 来完成这个...

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

document.getElement('.select !+ li').setStyles({border: '1px solid #000' });

这将为您的 .select 类周围的上一个和下一个列表项设置样式。

Answer 3

你可以尝试这样的事情：

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

现在您创建一个样式，例如：

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

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

这是一个工作演示：更改活动类。

希望这可以帮助 ：）