为什么：在这种情况下，第一个孩子选择器不工作？

Question

参见示例http://jsfiddle.net/qqyYU/1/

<div class="detail">

    <p><b>Entry</b><br>

First <span>40,-</span><br>

Second <span>20,-</span></p></div>

CSS

.detail p span:first-child {background:yellow;}

Answer 1

<p>的第一个孩子是<b>代码，而不是<span>：

“此伪类仅在元素与其父元素的第一个子元素匹配时才匹配。” （http://reference.sitepoint.com/css/pseudoclass-firstchild）

修改 如果您无法更改元素的类并且需要支持IE7（尽管它可能不起作用），您可以使用相邻的兄弟选择器：

http://jsfiddle.net/qqyYU/5/

Answer 2

你想要的CSS是：

.detail p span:nth-of-type(1) {background:yellow;}

不幸的是，浏览器支持不佳。