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)来专门定位"活动"链接后面的锚点,但我不确定它是否可行.

我已经测试过使用"h3 + 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 元素后面紧接着 E 元素

当您使用 jQuery 时，您可以通过以下方式选择元素：

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

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