在这个例子中,`:first-child`伪类存在哪些不足之处？

Question

我有一些基本的HTML ...

<div id="panel">
    <h3>abc</h3>
    <address>a</address>
    <address>b</address>
    <address>c</address>
</div>

......和CSS ......

#panel address:first-child {
    padding-bottom: 1em;
    border-bottom: 1px solid #e0e3e6;
}

jsFiddle.

我总是:first-child指那个元素的第一个孩子(address在这个例子中).我从最严格的意义上认识到第一个孩子将成为h3元素,但我始终相信它是如何运作的.

根据W3C规范,我错了......

:first-child伪类匹配一个元素,该元素是某个其他元素的第一个子元素.

是否有一种解决方法来选择第一个address元素而不需要改变HTML(即添加一个class或id属性)？

如果我需要修改HTML,那就这样吧,但我心里想的是我忽略了一些明显的东西.

Answer 1

你需要:first-of-type:

#panel address:first-of-type { ...

现场演示: http ://jsfiddle.net/3ASFE/1/

(此选择器未在IE8及以下版本中实现)

Answer 2

是否有解决方法来选择第一个地址元素而不需要更改HTML？

#panel h3 + address {
    padding-bottom: 1em;
    border-bottom: 1px solid #e0e3e6;
}