Question

我只是搞乱了新的HTML5标签和伪选择器，并注意到部分：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/

为什么这不起作用？

感谢

Answer 1

这条规则：

section:only-child

匹配section的{{1}}元素。

此规则（注意空格）：

only-child

匹配section :only-child only-child的元素。 Is this what you expected？

Answer 2

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

为什么CSS部分：only-child选择器不起作用？

2 个答案: