我如何 select 一些兄弟姐妹，但并非全部仅通过 CSS？

Question

<div class="wrapper">
   <ul class="cars">
      <li class="headline">My Cars</li>
      <li>Ferrari</li>
      <li>Hummer</li>
   </ul>
  <ul class="cars">
      <li class="headline">My Cars</li>
      <li>Volvo</li>
      <li>Caddilac</li>
   </ul>
</div>

有没有办法只用 CSS 隐藏第二个<li class="headline"> ？ 我尝试了几种不同的兄弟选择器方法，例如+ ， >等。但没有成功。 我在 position 中，我无法控制源代码，只有 CSS。 所以请不要建议使用 javascript，更改 HTML 等。除了 CSS 之外，我根本无法更改任何内容：)

Answer 1

每个.headline始终是其包含的.cars的第一个孩子，因此 select 兄弟姐妹基于.cars元素。

最有可能的是，您想要第二个.cars ：

/* CSS2 */
.cars:first-child + .cars .headline {
    display: none;
}

/* CSS3 equivalent, but for browser compatibility just use the above instead */
.cars:nth-child(2) .headline {
    display: none;
}

Answer 2

是的，您可以使用 CSS3 选择器 nth-child：

div.wrapper ul.cars:nth-child(2) li.headline { display: none; }

在此处阅读更多信息： http://www.quirksmode.org/css/nthchild.html

Answer 3

CSS3 具有nth-of-type()选择器，但 MSIE 不支持它 AFAIK。