html - CSS 选择器 : How to select element sibling AND element itself?

Question

因此，我有一组链接，并且希望仅当它们是 DOM 中的同级链接时才将样式 [让我们说 color: red;] 应用到这些链接。例如，如果我有三个链接:

<a class="nav-link-primary">link</a>
<a class="nav-link-secondary">link</a>
<a class="nav-link-tertiary">link</a>

它们应该全部是红色的。

但是如果我有这样的东西:

<a class="nav-link-primary">link</a>
<span>Lorem</span>
<a class="nav-link-secondary">link</a>
<a class="nav-link-tertiary">link</a>

只有最后两个 链接应该是红色的，因为它们是兄弟。可以用 CSS 做到这一点吗？

这是我试过的

.nav-link-primary ~ .nav-link-primary,
.nav-link-primary ~ .nav-link-secondary,
.nav-link-primary ~ .nav-link-tertiary,
.nav-link-secondary ~ .nav-link-primary,
.nav-link-secondary ~ .nav-link-secondary,
.nav-link-secondary ~ .nav-link-tertiary,
.nav-link-tertiary ~ .nav-link-primary,
.nav-link-tertiary ~ .nav-link-secondary,
.nav-link-tertiary ~ .nav-link-tertiary {
  color: red;
}

.nav-link-primary:first-child + .nav-link-secondary{
  color: red;
}

.nav-link-secondary:first-child + .nav-link-primary{
  color: red;
}

<a class="nav-link-primary">link</a>
<a class="nav-link-secondary">link</a>
<a class="nav-link-tertiary">link</a>

这是我的 CodePen 链接:http://codepen.io/obliviga/pen/jryPgO

这不会使第一个链接变为红色，即使它在第一个选择器 block 中定义了同级链接。有什么想法吗？

Answer 1

第一个链接不是红色的，因为没有要引用的前面的元素，也没有可以执行此操作的 CSS 选择器。参见 Is there a "previous sibling" CSS selector? .一个更好的主意是有一个共同的父元素来引用，例如 .adjacent-links，如下所示:

.adjacent-links a { color: red; }

<a class="nav-link-primary">link</a>
<span>Lorem</span>
<span class="adjacent-links">
    <a class="nav-link-secondary">link</a>
    <a class="nav-link-tertiary">link</a>
</span>

编辑 2016 年 10 月 11 日:

如果您需要管理大量此类链接，或者它们是自动生成的，您也可以使用一些 jQuery。找到导航链接，检查下一个元素是否是导航链接，如果是，则添加样式。您需要为所有导航链接(在本例中为 .nav-link)创建一个通用类，以便高效运行。

$('.nav-link').filter(function(e) {
    return e.nextElementSibling.classList.contains('nav-link');
}).css({
    color: 'red'
});