CSS3選擇器：+ vs〜和〜？相反

Question

看到可用的不同選擇器之后（從CSS3開始）， +和~之間的差異似乎幾乎相同。 而且似乎還沒有選擇器具有與~相反的功能。

取自www.w3schools.com ：

• div + p ：選擇緊接<div>元素之后的所有<p> <div>元素。
• p ~ ul ：選擇每個<p>元素之后的<ul> <p>元素。

p ~ ul可以重寫為：

選擇放置在 <p>元素之后的所有<ul>元素。

因為在 <p> 之前表示<p>在<ul>之前。

這使得作為這些運營商之間的唯一區別+只能選擇后立即 （我承擔全部連續出現）的元素，而~選擇任何地點后 （但仍具有相同父）元素。

1. 我對差異的理解正確嗎？

最初，我認為這兩位操作員是相反的，因為英語有些令人困惑。 因此，我的后續問題是：

2. 如何選擇放置在另一個元素之前（或之前）的每個元素？

---

我正在處理這種情況：

我在同一父div中並排有2個div。

 <div id="container"> <div id="column_left"> </div> <div id="column_right"> </div> </div> 

當我將任何一個div懸停時，都應該使用CSS過渡逐漸變得更加不透明。 當我也不懸停時，它們應該變得更加透明。

因此，要在懸停左側時選擇右側列，可以使用選擇器：

 #column_left:hover+column_right { opacity: 0.9; transition: opacity 300ms; -webkit-transition: opacity 300ms; } 

現在，當鼠標懸停在右側時，如何選擇左側列？

這是我到目前為止的CSS：

 div { border: 1px solid black; background: #262626; } #left { float: left; width: 200px; height: 200px; margin: 0; transition: background 300ms; -webkit-transition: background 300ms; } #right { display: inline-block; width: 200px; height: 200px; transition: background 300ms; -webkit-transition: background 300ms; } #left:hover,#left:hover~#right { background: #909090; transition: background 300ms; -webkit-transition: background 300ms; } 

 <div id=left> </div> <div id=right> </div> 

Answer 1

我對差異的理解正確嗎？

是。 選擇器L3定義了這兩種同級組合器（重點是我的）：

• 相鄰的同級組合器

  相鄰的同級組合器由分隔兩個簡單選擇器序列的“加號”（U + 002B，+）字符組成。 這兩個序列表示的元素在文檔樹中共享相同的父對象，而第一個序列表示的元素緊接在第二個序列表示的元素之前 。

• 通用同級組合器

  通用同級組合器由分隔兩個簡單選擇器序列的“波浪號”（U + 007E，〜）字符組成。 這兩個序列所表示的元素在文檔樹中共享相同的父對象，而第一個序列所表示的元素在第二個所表示的元素之前（不一定緊接） 。

如何選擇放置在另一個元素之前（或之前）的每個元素？

如前面有同級選擇器中所述。 ，選擇器L3不可能做到這一點。 選擇器L4可能引入了一些方法，但是由於性能原因，它可能僅在JS中可用（例如，通過querySelector ），而在CSS樣式表中不可用。

Answer 2

針對您特定用例的解決方案

當我將任何一個div懸停時，都應該使用CSS過渡逐漸變得更加不透明。 當我也不懸停時，它們應該變得更加透明。

 .wrap { float:left; overflow:hidden } div { border: 1px solid black; } #left { float: left; width: 200px; height: 200px; margin: 0; background-color: red; transition: background 300ms; -webkit-transition: background 300ms; } #right { float:left; width: 200px; height: 200px; background-color: blue; transition: background 300ms; -webkit-transition: background 300ms; } .wrap:hover > #right, .wrap:hover > #left { background: #909090; transition: background 300ms; -webkit-transition: background 300ms; } 

 <div class="wrap"> <div id=left> </div> <div id=right> </div> </div>