我只是搞乱了新的HTML5标签和伪选择器,并注意到该部分:唯一 - 子选择器似乎不起作用。我正在使用最新版本的Chrome(23.0)进行测试。为什么CSS部分:独生子选择器不起作用?
我的代码是:
<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/
任何理由,这是不工作?
感谢
您似乎没有任何'section'元素是'only-child'。你期待什么规则匹配? – robertc