在这个例子中，`：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 spec，我错了......

  

：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;
}

Answer 3

我很确定你没有忽视任何明显的事情。

由于你要使用CSS3（:first-child），你可以使用类似的东西：

#panel *:not(address) + address {
    padding-bottom: 1em;
    border-bottom: 1px solid #e0e3e6;
}

但是这有一个限制：它选择每个 address标记，前面没有其他address标记，因此如果你有多个<address>个es与其他标签交错，它对你没有帮助。

如果您确定知道标记的DOM索引，也可以使用nth-child：

#panel address:nth-child(2) {
    padding-bottom: 1em;
    border-bottom: 1px solid #e0e3e6;
}

编辑我已完成Selectors Level 3引用，并且有一个nth-of-type选择器：

#panel address:nth-of-type(1) {
    padding-bottom: 1em;
    border-bottom: 1px solid #e0e3e6;
}

听起来像你想要的。

Answer 4

我建议您使用:nth-of-type pseudo-selector代替:first-child伪选择器。

#panel address:nth-of-type(1) {
    padding-bottom: 1em;
    border-bottom: 1px solid #e0e3e6;
}