如何在CSS中引用给定选择器的第一个出现？

Question

HTML：

<div class="foo">firstBar</div><!-- give this one a different style -->
<div class="foo">secondBar</div>
<div class="foo">thirdBar</div>

CSS：

 .foo { font-size: 12pt }

如果不编辑现有的HTML，是否有可能以某种方式引用类“foo”的第一次出现并赋予它不同的风格？

Answer 1

div:first-child { font-size: 12pt }

注意：要使：first-child 在IE中工作，必须声明DOCTYPE。这在IE6中不起作用。

Answer 2

如果div包含在外部div中，并且第一个foo是此外部div的第一个子节点，则可以使用div#outer_div + div.foo { font-size: 12pt }

编辑：评论者是对的，这不行。使用+来实现它的方法是重置所有其他div.foo的font-size属性，无限制：

div.foo + div.foo {...} div.foo + div.foo + div.foo {...}

这不是一个很好的方法，所以忽略我的答案。

Answer 3

如果元素相互成功，您可以使用：

.foo { font-size: 2em }
.foo + .foo { font-size: inherit }