为什么 CSS section:only-child 选择器不起作用？答案

【问题标题】：Why does CSS section:only-child selector not work?为什么 CSS section:only-child 选择器不起作用？
【发布时间】：2012-12-12 10:25:28
【问题描述】：

我只是在搞乱新的 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;

    }

理论上，文本“first child test”应该是黄色的，因为第二部分只有一个div，但它没有得到字体的黄色。

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

你可以在这里看到 jsfiddle：http://jsfiddle.net/KwzZs/3/

这不起作用的任何原因？

谢谢

【问题讨论】：

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

标签： html css css-selectors pseudo-class

【解决方案1】：

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

【讨论】：

【解决方案2】：

这条规则：

section:only-child

匹配section 元素，该元素是only-child。

这条规则（注意空格）：

section :only-child

匹配only-child 或section 的元素。 Is this what you expected?

【讨论】：

继续被空间所困扰...感谢@robertc，这正是我想要的。
更准确地说，如果你想要section的唯一子，你应该使用>而不是空格：section > :only-child。后跟:only-child 的空格表示其父级的唯一子级，其中父级可能是也可能不是section。