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

Question

的方式,W3Schools的短语吧,他们的声音一样.

W3Schools的CSS参考

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

一般兄弟选择器MDN

相邻的兄弟选择器w3

Answer 2

如果<p>元素紧跟在<div>元素之后,那是不是意味着<p>元素前面有<div>元素？

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

+和之间的差异~是~匹配所有后续兄弟,无论它们与第一个元素的接近程度,只要它们共享同一个父元素.

使用单个示例最简洁地说明了这两点,其中每个规则应用不同的属性.请注意,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>

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

不幸的是,还没有.

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>