CSS 选择器 div + p（加号）和 div ~ p（波浪号）的区别

Difference between the selectors div + p (plus) and div ~ p (tilde)

提问by user4055428

The way that w3schoolsphrases it, they sound the same.

w3schools 的措辞方式，它们听起来是一样的。

W3Schools' CSS reference

div + p
Selects all <p>elements that are placed immediately after <div>elements

div ~ p
Selects every <p>element that are preceded by a <div>element

W3Schools 的 CSS 参考

div + p
选择<p>紧跟在<div>元素之后的所有元素

div ~ p
选择每个<p>元素前面的<div>元素

If a <p>element is immediately after a <div>element, doesn't that mean that the <p>element is preceded by a <div>element?

如果一个<p>元素紧跟在一个<div>元素之后，这是否意味着该<p>元素之前是一个<div>元素？

Anyhow, I'm looking for a selector where I can select an element that is place immediately beforea given element.

无论如何，我正在寻找一个选择器，我可以在其中选择一个位于给定元素之前的元素。

回答by Alex Char

Adjacent sibling selectors X + Y

相邻兄弟选择器 X + Y

Adjacent sibling selectors have the following syntax: E1 + E2, where E2 is the subject of the selector. The selector matches if E1 and E2 share the same parent in the document tree and E1 immediately precedes E2, ignoring non-element nodes (such as text nodes and comments).

相邻的同级选择器具有以下语法：E1 + E2，其中 E2 是选择器的主题。如果 E1 和 E2 在文档树中共享相同的父级并且 E1 紧跟在 E2 之前，则选择器匹配，忽略非元素节点（例如文本节点和注释）。

ul + p {
   color: red;
}

In this example it will select only the element that is immediately preceded by the former element. In this case, only the first paragraph after each ul will have red text.

在这个例子中，它只会选择紧跟在前一个元素之前的元素。在这种情况下，只有每个 ul 之后的第一段才会有红色文本。

ul + p {
    color: red;
}

<div id="container">
    <ul>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
    </ul>
    <p>This will be red</p>
    <p>This will be black</p>
    <p>This will be black</p>
</div>

General sibling selectors X ~ Y

一般兄弟选择器 X ~ Y

The ~ combinator separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent.

~ 组合子分隔两个选择器，并且仅当第二个元素位于第一个元素之前时才匹配第二个元素，并且两者共享一个共同的父元素。

ul ~ p {
   color: red;
}

This sibling combinator is similar to X + Y, however, it's less strict. While an adjacent selector (ul + p) will only select the first element that is immediately preceded by the former selector, this one is more generalized. It will select, referring to our example above, any p elements, as long as they follow a ul.

这个同级组合器类似于 X + Y，但是，它不那么严格。虽然相邻的选择器 (ul + p) 只会选择紧接在前一个选择器之前的第一个元素，但这个选择器更通用。参考我们上面的例子，它会选择任何 p 元素，只要它们跟在 ul 之后。

ul ~ p {
  color: red;
}

<div id="container">
  <ul>
    <li>List Item
      <ul>
        <li>Child</li>
      </ul>
    </li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
  </ul>
  <p>This will be red.</p>
  <p>This will be red.</p>
  <p>This will be red.</p>
  <p>This will be red.</p>
</div>

Source

来源

code.tutsplus

代码.tutsplus

General sibling selectors MDN

一般同级选择器 MDN

Adjacent sibling selectors w3

相邻兄弟选择器 w3

回答by BoltClock

If a <p>element is immediately after a <div>element, doesn't that mean that the <p>element is preceded by a <div>element?

如果一个<p>元素紧跟在一个<div>元素之后，这是否意味着该<p>元素之前是一个<div>元素？

This is correct. In other words, div + pis a proper subsetof div ~ p— anything matched by the former is alsomatched by the latter, by necessity.

这是对的。换句话说，div + p是一个真子集的div ~ p-任何通过前者匹配的是同样由后者相匹配，必然。

The difference between +and ~is that ~matches all following siblings regardless of their proximity from the first element, as long as they both share the same parent.

之间的区别+，并~是，~不管从第一个元素及其邻近的所有兄弟姐妹之后匹配，只要它们共用相同的父。

Both of these points are most succinctly illustrated with a single example, where each rule applies a different property. Notice that the one pthat immediately follows the divhas both rules applied:

用一个示例最简洁地说明这两点，其中每个规则应用不同的属性。请注意，p紧随 的那一项div同时应用了两条规则：

div + p {
    color: red;
}

div ~ p {
    background-color: yellow;
}

<section>
    <div>Div</div>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
</section>
<section>
    No div
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
</section>

Anyhow, I'm looking for a selector where I can select an element that is place immediately beforea given element.

无论如何，我正在寻找一个选择器，我可以在其中选择一个位于给定元素之前的元素。

Unfortunately, there isn't one yet.

不幸的是，目前还没有。

回答by Mina Luke

consider this example:

考虑这个例子：

p + p { /* the first p immediately after a preceding p */
   color: red; 
} 

p ~ p { /* all p's after a preceding p */
   font-weight: bold;
} 

<div>
    <p>1</p>
 <div>separator</div>
    <p>2</p> <!-- only ~ is applied here -->
   <p>3</p> <!-- both + and ~ are applied here -->
</div>

回答by Selva

1) Adjacent Sibling Selectors (S1 + S2)

1) 相邻同胞选择器 (S1 + S2)

Adjacent sibling selector is used to select a specified element which is immediate next to another specified element. Both elements should be in the same level.

相邻兄弟选择器用于选择紧邻另一个指定元素的指定元素。两个元素应该在同一级别。

div + p {
    color:red;
}

Adjacent Sibling Selectors example

相邻兄弟选择器示例

2) General Sibling Selectors (S1 ~ S2)

2) 一般同胞选择器 (S1 ~ S2)

General sibling selector is used to select all specified sibling elements of another specified element.

通用同级选择器用于选择另一个指定元素的所有指定同级元素。

div ~ p {
   color:red;
}

General Sibling Selectors example

一般同级选择器示例

Adjacent Sibling(S1 + S2) vs General Sibling(S1 ~ S2) selectors:

Adjacent Sibling(S1 + S2) vs General Sibling(S1 ~ S2) 选择器：

Adjacent sibling(S1 + S2) selector selects immediate sibling element only but general sibling(S1 ~ S2) selector selects all sibling elements of another specified element. Both cases, both elements(S1 and S2) should be in the same level.

相邻兄弟（S1 + S2）选择器只选择直接兄弟元素，而一般兄弟（S1~S2）选择器选择另一个指定元素的所有兄弟元素。在这两种情况下，两个元素（S1 和 S2）都应该在同一级别。

Remaining selectors are explained here: https://www.csssolid.com/35-css-selectors-to-remember.html

剩余的选择器在这里解释：https: //www.csssolid.com/35-css-selectors-to-remember.html