为什么CSS中的:only-child选择器不起作用？

Question

我只是在玩新的HTML5标签和伪选择器时注意到，section:only-child选择器似乎不起作用。我正在最新版本的Chrome（23.0）上测试。

我的代码是：

<section id="s1">
    <div id="div1">abc</div>
    <div id="div2">
        <span>first span</span>
        <span class="sp">second span</span>
    </div>
</section>

<section>
    <div>first child test</div>
</section>​

并且CSS是：

section {
background-color: brown;
width: 400px;
height: 200px;
}

#s1 {
position: relative; 
background-color: rgba(0,255,0,0.5); 
border: 1px solid #000; width: 50%;
}

#div1 {
background-color: #0f0; 
position: relative;
}

#div2 {
background-color: #0ff; 
width: 200px; 
color: red;
}

#div2 .sp {
color: white;
text-decoration:line-through;
}

section:only-child {
color: yellow;

    }​

理论上，“第一个子元素测试”应该是黄色的，因为第二个部分只有一个div，但字体并没有变成黄色。

如果我将选择器更改为div:only-child，它就可以正常工作。

您可以在此处查看jsfiddle：http://jsfiddle.net/KwzZs/3/

为什么它不起作用呢？

谢谢

- GR7

---

您似乎没有任何section元素是only-child。您期望该规则匹配什么？ - robertc

Answer 1

这条规则：

section:only-child

匹配一个是唯一子元素的 section 元素。

这个规则（注意空格）：

section :only-child

匹配作为 section 的 only-child 元素。 这符合您的预期吗？

- robertc

---

总是被空格搞得很烦...谢谢@robertc，这正是我想要的。 - GR7

更加准确地说，如果你想要选择 section 的唯一子元素，你应该使用 > 而不是空格：section > :only-child。空格后面跟着的 :only-child 表示它的父级只能有一个子元素，但这个父级不一定是 section。 - BoltClock

Answer 2

x:only-child 表示 x 元素是其父元素的唯一子元素 - 而不是 x 只有一个子元素。

- irrelephant