Question

w3schools对它的说法，它们听起来是一样的。

W3Schools' CSS reference

div + p
  选择紧跟在<p>元素
之后的所有<div>元素
div ~ p
  选择前面带有<p>元素
的每个<div>元素

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

无论如何，我正在寻找一个选择器，我可以选择一个元素，该元素会在之前放置。

Answer 1

相邻的兄弟选择器X + Y

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

ul + p {
   color: red;
}

在这个例子中，它只会选择紧接在前一个元素之前的元素。在这例如，每个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>

一般兄弟选择器X~Y

〜组合器分离两个选择器并匹配第二个选择器元素只有在第一个元素之前，并且两者共享一个共同元素父节点。

ul ~ p {
   color: red;
}

这个兄弟组合器类似于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>

<强>来源

code.tutsplus

General sibling selectors MDN

Adjacent sibling selectors w3

Answer 2

如果<p>元素紧跟在<div>元素之后，那么这是否意味着<p>元素前面有<div>元素？

这是对的。换句话说，div + p是div ~ p的正确子集 - 前者匹配的任何内容也后者必然匹配。< / p>

+和~之间的区别在于~匹配所有后续兄弟姐妹，无论他们与第一个元素的接近程度如何，只要它们共享同一个父级。

这两点最简洁，只有一个例子，每个规则都适用不同的属性。请注意，紧跟p之后的那个div同时应用了两个规则：

＆＃13;

div + p {
    color: red;
}

div ~ p {
    background-color: yellow;
}

＆＃13;

<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>

＆＃13;

无论如何，我正在寻找一个选择器，我可以选择一个在之前立即的元素。

不幸的是，there isn't one yet。

Answer 3

考虑这个例子：

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>

Answer 4

1）相邻的同级选择器（S1 + S2）

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

div + p {
    color:red;
}

Adjacent Sibling Selectors example

2）常规同级选择器（S1〜S2）

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

div ~ p {
   color:red;
}

General Sibling Selectors example

相邻兄弟（S1 + S2）与常规兄弟（S1〜S2）选择器：

相邻兄弟（S1 + S2）选择器仅选择直接兄弟元素，而常规兄弟（S1〜S2）选择器选择另一个指定元素的所有兄弟元素。两种情况下，两个元素（S1和S2）都应处于同一级别。

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

选择器div + p（加）和div~p（代字号）之间的差异

4 个答案: