CSS选择器：如何选择元素同胞和元素本身？

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

这没有第一个链接的红色，即使它有一个兄弟在第一部分选择器中定义。有任何想法吗？

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' 
}); 

Answer 2

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

---

编辑：既然主题是同级不同的使用情况选择，人有我精的帖子给予更多有用的投入和一点更多的澄清。在你的情况，而不是使用兄弟选择器，使用其他组合选择器如后代选择器或子选择器（因为我们正在选择父代中的组件）更直接。

对于上面提到的例子，仅仅通过使用兄弟选择器就可以得到困难的。如果我们只需要使用兄弟选择器，那么我们最终不会以正确的方式使用兄弟选择器，或者需要一种破解（不是正确的方式），导致代码不可读（基于动态上述标记生成）。

链接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。

希望这会帮助你:)