html - 后代组合器和后续兄弟组合器有什么区别？

Question

据我所知，

后代组合子（空格）以父元素的子元素和后代为目标。

随后的同级组合器 (~)选择指定元素之后任何位置的所有元素，无论其是否相邻。

因此，使用该定义不会H1 p每次H1 ~ p都给我相同的选择结果？

这两者甚至是一件事的事实告诉我，它们有它们的目的……那我错过了什么？

编辑**如果我错了，请纠正我 - 但经过进一步研究，我想我明白了。

(~) 选择指定元素之后的所有元素。而（空格）选择指定元素内部的所有元素？

标签： htmlcsscss-selectors

Answer 1

那么有了这个定义，H1 p 和 H1 ~ p 不是每次都给我相同的选择结果吗？

答：完全错误...

(~) 选择指定元素之后的所有元素。而（空格）选择指定元素内部的所有元素？

答：是的，这个是正确的。

澄清：

Space_Selector：选择选择器内的所有元素。

div p {background: red;}

<p>paragraph 1.</p>
<p>paragraph 2.</p>
<p>paragraph 3.</p>
<div>
  <p>paragraph 4.</p>
  <p>paragraph 5.</p>
  <p>paragraph 6.</p>
</div>
<p>paragraph 7.</p>
<p>paragraph 8.</p>
<p>paragraph 9.</p>

波浪号/兄弟姐妹选择器（选择所有即将到来的/后来的兄弟姐妹）：

div ~ p { background: yellow;}

<p>paragraph 1.</p>
<p>paragraph 2.</p>
<p>paragraph 3.</p>
<div>
  <p>paragraph 4.</p>
  <p>paragraph 5.</p>
  <p>paragraph 6.</p>
</div>
<p>paragraph 7.</p>
<p>paragraph 8.</p>
<p>paragraph 9.</p>