混淆选择器,div~h1 vs div> H1

时间:2013-09-18 13:14:10

标签: css css3 css-selectors

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

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

它选择所有h1是div的直接子项吗?

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

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

2 个答案:

答案 0 :(得分:3)

div ~ h1将选择所有以下兄弟姐妹[兄弟] {而不仅仅是直接兄弟姐妹)。

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

h1会选择所有

直接子女div > h1

h1会在div中选择所有 嵌套div h1(不仅仅是直接子项)。

所有这一切,可以找到更多here

答案 1 :(得分:1)

p ~ ul

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

body > P

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

http://www.w3.org/TR/CSS2/selector.html

换句话说

〜选择器使用直接的前任子句,而>更为一般,针对所有儿童,无论他们与父母有多远。