Question

<div class="wrapper">
    <!--
      Several random elements that I'm not able to predict.
      div, p, h3, etc. 
    --> 
    <div class="foo">...</div>
    <!-- 
      Could have only 1 .foo, 2 .foo, or 3, 4, 5 .foo... 
    -->
    <div class="foo">...</div>
    <!--
      Also several random elements
    -->
</div>

HTML代码就像上面那样。现在我知道div.foo:first-of-type不起作用的原因。但是有没有替代解决方案？

如何选择第一个.foo？如何选择最后一个.foo？当然是通过纯粹的CSS ...

谢谢！

Answer 1

如何选择第一个.foo？

此处描述的技术：CSS selector for first element with class：

div.foo {
  /* Style all */
}

div.foo ~ div.foo {
  /* Revert styles for all but the first */
}

如何选择最后一个.foo？

上述技术依赖于兄弟选择器和覆盖。兄弟选择器的最大限制是它们只能在一个方向上工作，并且因为它们通过覆盖之后的所有元素来为第一个元素工作，所以它们不会在最后一个工作，因为你不能选择在使用兄弟选择器某些其他元素之前来到的兄弟姐妹。

没有纯CSS替代品。

Answer 2

任何HTML5浏览器都可以让您按预期使用第n个类型......

我不是说这是一种推荐的技术，我只是展示了这个选项是如何工作的......

我不知道你是否喜欢它，但AFAIK是获得你想要的最后一个的唯一途径（正如BoltClock所说）

foo:first-of-type {
  background-color: lightgreen;
}

foo:last-of-type {
  background-color: lightblue;
}

<div>
  <div>div</div>
  <foo>foo</foo>
  <div>div</div>
  <foo>foo</foo>
  <div>div</div>
  <foo>foo</foo>
</div>

Answer 3

你可以使用第一个孩子和最后一个孩子

HTML

<div class="wrapper">
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>

CSS

p:first-child {
    color: red;
}

p:last-child {
    color: green;
}

这是JsFiddle Example

请注意，自IE 9起支持last-child，并且IE 7支持first-child

我怎么能通过纯css实现这个：first-of-type

3 个答案: