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;
}

（小提琴：http://jsfiddle.net/armdan/ksB6f/1/）

我希望在这个例子中不会选择“h2部分的侄子”，但它会被选中并变为红色。我不明白我错过了什么。

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"，它们是：

一个
EM
强
小
标记
缩写
DFN
I
B'/ LI>
取值
û
码
VAR
SAMP
KBD
SUP
子
q
举
跨度
BDO
BDI
BR
WBR
插件
德尔
IMG
嵌入
物体
IFRAME
地图
区域
脚本
无脚本
红宝石
视频
音频
输入
textarea的
选择
按钮
标签
输出
数据列表
密钥生成
进步
命令
画布
时间
米

Answer 2

有一些事情......

<h2>无法包含在<h1>。
section > h2选择<h2>，它直接位于<section>下，而不是大子元素。在后一种情况下，您需要使用section h2。

解决方法是以这种方式更改代码以使其具有语义：

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

Css子选择器不起作用

2 个答案: