select器div + p（plus）和div〜p（波浪号）之间的差异
w3schools短语的方式，他们听起来是一样的。
W3Schools的CSS参考
div + p
select紧接在<div>元素之后的所有<p><div>元素
div ~ p
select前面有<div>元素的每个<p><div>元素
如果一个<p>元素紧跟在一个<div>元素之后，那不是说元素之前有一个<div>元素吗？
无论如何，我正在寻找一个select器，我可以select一个位于给定元素之前的元素。
相邻的兄弟select符X + Y
相邻的同胞select符有以下语法：E1 + E2，其中E2是select器的主题。 如果E1和E2在文档树中共享同一个父元素，并且E1在E2之前，忽略非元素节点（如文本节点和注释），则select器匹配。
ul + p { color: red; }
在这个例子中，它只会select前一个元素前面的元素。 在这种情况下，只有每个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>
如果一个
<p>元素紧跟在一个<div>元素之后，那不是说元素之前有一个<div>元素吗？
这是对的。 换句话说， div + p是div + p一个真正的子集 – 任何与前者相匹配的东西都必须与后者相匹配。
+和~之间的区别在于~匹配所有后面的兄弟姐妹，不pipe它们与第一个元素的邻近程度如何，只要它们共享相同的父亲。
这两点都是一个简单的例子，其中每个规则都应用了不同的属性。 请注意，紧跟在div那个p同时适用了两个规则：
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>
考虑这个例子：
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>
