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">？我尝试了几种不同的兄弟选择器方法，例如+，>等，但没有成功。我处在一个我无法控制源代码的位置，只有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;
}

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。

如何通过CSS选择一些兄弟姐妹而不是全部？

3 个答案: