为什么:在这种情况下,第一个孩子选择器不工作?

时间:2012-01-29 06:57:54

标签: html css

参见示例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;}

2 个答案:

答案 0 :(得分:3)

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

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

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

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

答案 1 :(得分:2)

你想要的CSS是:

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

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