css - 与选择器混淆，div ~ h1 vs div > h1

Question

我在理解时遇到问题div ~ h1，它似乎选择了所有直接跟随 div 的 h1 标签。

但这不是div > h1实际做的吗？

它选择所有 h1 是 div 的直接子级？

我也遇到过div + h1，起初我很困惑，但这似乎只选择了一个元素，即 div 后面的 1 个 H1 标签。

任何人的任何想法都会非常有帮助。

score 5 · Accepted Answer

div ~ h1将选择所有以下h1兄弟姐妹 [兄弟]（不仅仅是直接的）。

div + h1将仅选择div 之后的直系兄弟。h1

div > h1将选择所有div的h1直接子级。

div h1将选择所有嵌套在divh1中的（不仅仅是直接子级）。

所有这些，更多可以在这里找到

score 1 · Accepted Answer

p ~ ul

~ 选择前面有 P 元素的每个 UL 元素

body > P

设置作为 BODY 子级的所有 P 元素的样式。

换句话说

~ 选择器使用直接前导子句，而 > 更通用，针对所有子代，无论其距离父代多远。