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

Question

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

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

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

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

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

Answer 1

div ~ h1将选择所有的h1下列兄弟姐妹[兄弟（不只是眼前的一个）。

div + h1将只选择div 之后的直接兄弟h1。

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

div h1将选择所有的h1被嵌套在div（不只是直接的儿童）。

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