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。

希望這會幫助你:)