如何隐藏除第一个<h2>之外的所有<h2>？</h2>

Question

如何隐藏除第一个之外的所有<h2>？

<div class="holder">
  <h2>SOme heading</h2>
  <h2>Some Heading<h2>
  <h2>Some Heading<h2>
  <h2>Some Heading<h2>
  <h2>Some Heading<h2>
</div>

我很熟悉我们可以使用类似的东西：

p:nth-child(2)
{
  display:none;
}

但不确定如何隐藏除第一个之外的所有内容。有人能指出我正确的方向吗？想要跨浏览器兼容的东西。

Answer 1

以下是使用adjacent sibling selector

的一个选项

jsFiddle example

.holder h2 + h2 {
    display:none;
}

+可能是supportted by IE7+

的最佳选择

选择器，例如nth-child / :not仅 work in IE9+

Answer 2

h2:nth-child(n2) {
   display: none;
}

http://codepen.io/sacha/full/cAJEo

编辑：此链接也可用于执行任何nth-child测试

Answer 3

你可以这样做：

#parent h2{
    display: none;
}

#parent h2:first-child{
    display: block;
}

http://jsfiddle.net/mWn2R/

Answer 4

h2:not(:first-child) {
    display: none;
}

Answer 5

请参阅this fiddle

这是使用:not伪选择器与:first-child伪选择器结合使用的选项。

div.holder h2:not(:first-child) {
  display: none;
}

Answer 6

假设标题之间可以有其他标记，使用现代CSS我们可以将其写为

h2:not(:first-of-type) { display: none; }

或

h2:nth-of-type(n+2) { display: none; }

为了使代码与IE8兼容，我们可以使用以下内容，类似于JoshC的答案：

.holder h2 ~ h2 { display: none; }

但为什么在代码中有许多不可见的标题呢？对搜索引擎来说似乎不太好......