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>