html - Css 子选择器不起作用

Question

我正在研究子选择器和后代选择器之间的区别。根据我找到的文档和这个问题 CSS Child vs Descendant selectors我写这个例子:

<div>
    <h2>h2 1</h2>
    <h2>h2 2</h2>
    <section>
    section
        <h1>h1 section's son
            <h2>h2 section's nephew</h2>
        </h1>
        <h2>h2 section's son</h2>
    </section>
    <h2>h2 3</h2>
    <h2>h2 4</h2>
</div>

CSS:

section > h2 {
    color:red;
}

(在这里 fiddle :http://jsfiddle.net/armdan/ksB6f/1/)

我预计在这个例子中“h2 section's nephew”不会被选中，但它被选中并且变成了红色。我不明白我错过了什么。

Answer 1

可能是因为h1包含一个h2是无效的。如果将 h1 更改为可以包含 h2 的元素，例如 div，它会按预期工作:

<div>
    <h2>h2 1</h2>
    <h2>h2 2</h2>
    <section>
    section
        <div>h1 section's son
            <h2>h2 section's nephew</h2>
        </div>
        <h2>h2 section's son</h2>
    </section>
    <h2>h2 3</h2>
    <h2>h2 4</h2>
</div>

http://jsfiddle.net/Z5CeB/

背景:HTML5 spec for h1说它只能包含文本和 "phrasing elements" ，它们是:

• 一个
• 他们
• 强
• 小
• 标记
• 缩写
• dfn
• 我
• b
• s
• 你
• 代码
• 变量
• sample
• kbd
• 喂
• 子
• 问
• 引用
• 跨越
• bdo
• bdi
• br
• 写
• 插入
• 删除
• 图片
• 嵌入
• 对象
• 内嵌框架
• map
• 地区
• 脚本
• 无脚本
• ruby
• 视频
• 音频
• 输入
• 文本区域
• 选择
• 按钮
• 标签
• 输出
• 数据列表
• 注册机
• 进步
• 命令
• Canvas
• 时间
• 米