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

标签 css css-selectors

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

但这不是 div > h1 的实际作用吗?

它选择所有 h1 是 div 的直接子节点?

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

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

最佳答案

div ~ h1 将选择 all h1 跟随兄弟 [brothers](不仅仅是直系亲属)。

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

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

div h1 将选择 所有 嵌套 在 div 中的 h1(不仅仅是直接子级) .

所有这些,还有更多可以找到 here

关于css - 混淆选择器,div ~ h1 vs div > h1,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18873268/

相关文章:

html - 如何禁用外部 css 样式表 - 新手

html - 更改视频的高度并保持相同的宽度

html - 单个选择器上的多个伪类

html - :first-letter CSS - restricting it to first letter of an article in a template

javascript - 如何选择仅具有特定属性的元素?

具有相同自动高度的 Css 元素

css - 不需要的水平滚动条出现在浏览器底部 (IE7)

jquery - 使用 Jquery 匹配 Rel 属性

css - 是否可以控制 Rails 读取 .CSS 文件的顺序,或者它是否按惯例固定?

jquery - 使用 jQuery 检查 div 是否有文本和某个类的跨度