我只是在摆弄新的 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
匹配 section
元素,该元素是 only-child
。
这条规则(注意空格):
section :only-child
匹配一个元素,该元素是 section
的 only-child
。 Is this what you expected ?
关于html - 为什么 CSS 部分 :only-child selector not work?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14047749/