CSS导航列表 - 下一个链接选择器兄弟姐妹组合器

Question

我正在尝试使用边框颜色对我的导航按钮创建简单的3D效果。我的按钮仅由一个无序的列表组成，带有背景颜色，边框颜色和文本填充，当然还有链接，因此链接以典型的方式嵌套了：

<ul>
<li><a class="active"   href="link1.html">link1</a></li>
<li><a class="inactive" href="link2.html">link2</a></li>
<li><a class="inactive" href="link3.html">link3</a></li>
..etc
</ul>

我正在使用jQuery在单击时更改锚类以更改外观。

我想做的是使用CSS（甚至我猜是JQuery）专门针对遵循" Active"链接的锚点，但我不确定是否可能。

我已经测试了" h3 p {"选择器类型的使用，我了解它的工作原理，但是一旦我尝试针对 links 。/p>

我尝试过：

a.active + a {background-color:red}

和...

a.active:link + a:link {background-color:red}

和其他特异性变体...

li a.active:link + a:link {background-color:red}
ul li a.active:link + a:link {background-color:red}
ul li a.active:link + a.inactive:link {background-color:red}

...等等。

这显然有效：

p.active + p {background-color:red}

...那为什么不这样做？

a.active + a {background-color:red}

因此，基本上我要弄清楚为什么我不能让同胞组合器使用链接，如果有解决方案或解决方法。

Answer 1

您正在使用Adjacent sibling combinator，因为您的锚链接不是兄弟姐妹，您的选择器未选择元素。

E + F：f element 立即之前是e元素

当您使用jQuery时，您可以这样选择元素：

$('a.active').parent().next().children('a').addClass('red')

http://www.w3.org/tr/selectors/#adjacent-sibling-combinators

Answer 2

在jQuery中可以定位下一个链接并轻松地添加类

假设您的点击处理程序看起来像这样：

$('#linkList a').click(function(){
    $('a.active').toggleClass('active').toggleClass('inactive')
    $('a.redClass').removeClass('redClass')
    $(this).toggleClass('active').toggleClass('inactive').parent().next().find('a').addClass('redClass')
})

Answer 3

我想做的是使用CSS（甚至我猜是JQuery）专门针对遵循" Active"链接的锚点，但我不确定是否可能。

可能有可能使用目标选择器的CSS方法，但是，我将寻求jQuery解决方案来监视您的锚固状态，以便下面的方法工作，有必要将ID附加到像HREF HASH一样，您的锚点很精确，例如：

<a href="#myanchor" id="myanchor">My anchor</a>

然后，您可以简单地从 $（window）对象监视 hashchange 事件，例如：

$(window).bind('hashchange', function(e) {
            var page = window.location.hash; // page = #myanchor
            $(page).doMyCssStuff(); //
        });

这是添加导航样式的好方法，如果用户在其故事中"返回"，上面的脚本只会对您的CSS工作进行确切的锚点。

。

我希望它能有所帮助。欢呼

Answer 4

支持未定义的答案。如果您只想使用CSS，则只需在LI上切换类而不是A元素上的类。那就足够容易了：li.Active li a {背景色：红色}

从字面上看，它的意思是：针对li内部的a元素，该元素带有"活动"类。