html - CSS3 选择器 : + vs ~ and the opposite of ~?

Question

在看到可用的不同选择器后(从 CSS3 开始)，+ 之间的区别和 ~似乎几乎相同。而且似乎也没有与 ~ 功能相反的选择器.

取自www.w3schools.com :

• div + p: Selects all <p> elements that are placed immediately after <div> elements.
• p ~ ul: Selects every <ul> element that are preceded by a <p> element.

p ~ ul的效果可以重写为:

Selects all <ul> elements that are placed after a <p> element.

因为前面有 <p>表示 <p>在 <ul> 之前.

这些运算符之间的唯一区别是 +只选择紧接在之后的元素(我假设所有连续出现)，而~选择元素之后的任何位置(但仍具有相同的父元素)。

1. 我对差异的理解是否正确？

最初我认为这两个运算符是相反的，因为有些令人困惑的英语。所以，我的后续问题是:

1. 如何选择位于另一个元素之前(或紧接其之前)的每个元素？

---

我正在处理这种情况:

我在同一个父 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

Is my understanding of the difference correct?

是的。 Selectors L3定义了这两种类型的兄弟组合器(强调我的):

• Adjacent sibling combinator

  The adjacent sibling combinator is made of the "plus sign" (U+002B, +) character that separates two sequences of simple selectors. The elements represented by the two sequences share the same parent in the document tree and the element represented by the first sequence immediately precedes the element represented by the second one.

• General sibling combinator

  The general sibling combinator is made of the "tilde" (U+007E, ~) character that separates two sequences of simple selectors. The elements represented by the two sequences share the same parent in the document tree and the element represented by the first sequence precedes (not necessarily immediately) the element represented by the second one.

How can I select every element placed before (or immediately before) another element?

如 Is there a previous sibling selector? 中所述, 使用 Selectors L3 不可能做到这一点。 Selectors L4 可能会引入一些方法来做到这一点，但它可能只在 JS 中可用(例如通过 querySelector)，但出于性能原因在 CSS 样式表中不可用。