Question

<div class="wrapper">

  <script></script>
  <script></script>

  <ul class="cars">
      <li class="headline">My Cars</li>
      <li>Ferrari</li>
      <li>Hummer</li>
  </ul>

  <noscript></noscript>
  <script></script>
  <script></script>

  <ul class="cars">
      <li class="headline">My Cars</li>
      <li>Volvo</li>
      <li>Caddilac</li>
   </ul>

  <noscript></noscript>
  <script></script>
  <script></script>

  <ul> etc....

</div>

问题：如何仅使用CSS隐藏除第一个之外的所有<li class="headline">My Cars</li>元素？

昨天我问了一个稍微类似的问题，答案工作正常，但情况已经改变，这引起了进一步的问题。我处于一个只能控制CSS的位置，所以请不要建议使用JavaScript或修改HTML。

那些该死的<script>和<noscript>元素导致昨天的解决方案完全失败。

对于浏览器兼容性，如果解决方案不使用CSS3，我将不胜感激。

有什么想法吗？

Answer 1

使用CSS2可能不太可行，除非您能以某种方式修改HTML，例如在您的第一个first中添加ul课程。无法触摸您的HTML，我无法想出一个CSS2选择器。

但如果这两个问题的答案都是肯定的：

您的所有li.headline只会出现在ul元素中吗？
您的div.wrapper仅包含script，noscript或ul个元素？

然后使用CSS3选择器很容易：

.wrapper > ul:first-of-type ~ ul li.headline {
    display: none;
}

Answer 2

使用完全 HTML结构（第一组<noscript>元素之上没有<script>），这将有效：

.wrapper > noscript + script + script + .cars > .headline {
    display: none
}

我非常不喜欢它，因为它太脆弱了。我宁愿使用JavaScript而不是那种可憎的东西。

请参阅： http://jsfiddle.net/davT8/

这适用于IE7 +和现代浏览器。

Answer 3

li.headline {
    display: none;
}

它在所有标准浏览器中兼容（请参阅此处的兼容性：http://www.quirksmode.org/css/display.html）

如何通过CSS选择某些兄弟姐妹？

3 个答案: