如何通过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>

有没有办法<li class="headline">只用CSS 隐藏第二个？我已经尝试了几种不同的兄弟选择器方法,例如+,>等等.但没有成功.我处在一个我无法控制源代码的位置,只有CSS.所以请不要建议使用javascript,更改HTML等.除了CSS,我根本无法改变任何东西:)

Answer 1

每个.headline都是它包含的第一个孩子.cars,所以选择基于.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;
}