Question

所以我有一组链接，并希望将样式[让我们说color: red;]应用于这些链接，只要它们是DOM中的兄弟姐妹。例如，如果我有三个链接：

<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

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

Answer 1

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

＆＃13;

.adjacent-links a { color: red; }

＆＃13;

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

＆＃13;

编辑10/11/2016：

如果你有很多这些链接要管理，或者它们是自动生成的，你也可以使用一些jQuery。找到导航链接，检查下一个元素是否为导航链接，如果是，则添加样式。您需要为所有导航链接（在本例中为.nav-link）设置一个公共类，以便有效地运行。

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

Answer 2

关于兄弟选择器 - 有相邻和一般兄弟selectors。

编辑：由于主题是关于具有不同用例的兄弟选择器，我已经对帖子进行了改进，以提供更多有用的输入和更多的说明。

在您的情况下，不是使用兄弟选择器，而是使用其他组合子选择器（如后代选择器或子选择器）（因为我们选择父组件内的组件）更直接。

对于上面提到的例子，单独使用兄弟选择器来完成结果将是难以。如果我们不得不只使用兄弟选择器，那么，我们最终将不会以正确的方式使用兄弟选择器或者需要一个hack（不是正确的方法）导致无法读取的代码（基于动态的方式）产生上述标记）。

关联recommendation for further reference。

简短回答：我不会在你的情况下在标记上应用兄弟选择器，但是会使用子组合选择器或后代选择器。

示例摘要以进一步阐明上述内容（希望代码不言自明）。

.nav-link-group > a {
  color: red;
}

<!-- apply a style `color: red` to those links only if they are siblings in the DOM -->
<div>Example 1 revised:</div>
<div class="nav-link-group">
  <a class="nav-link-primary">link</a>
  <a class="nav-link-secondary">link</a>
  <a class="nav-link-tertiary">link</a>
</div>

<hr>

<!-- only the last two links should be red, as they are siblings. -->
<div>Example 2 revised :</div>
<div>
  <a class="nav-link-primary">link</a>
  <span>Lorem</span>
  <span class="nav-link-group">
    <a class="nav-link-secondary">link</a>
    <a class="nav-link-tertiary">link</a>
  </span>
</div>

Answer 3

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

使用上面的css。

希望这会对你有所帮助:)。

CSS选择器：如何选择元素兄弟AND元素本身？

3 个答案: