隐藏第一个<li>元素</li>

Question

我的HTML结构如下：

<nav class="main-nav">
<ul>
  <li class="gallery-collection">
    <a href="/">Welcome</a>          <!-- Hide this -->
  </li>
  <li class="page-collection">
    <a href="/about/">About</a>
  </li>
  <li class="gallery-collection">
    <a href="/support/">Support</a>
  </li>
  ...

如何使用CSS隐藏第一个说“欢迎”的元素？请注意，这里有2个元素具有相同的类：'gallery-collection'。

Answer 1

最大兼容性：

.main-nav li {
    display: none;
}
.main-nav li + li {
    display: list-item;
}

兼容性较差，但不是太糟糕：

.main-nav ul li:first-child {
    display: none;
}

Answer 2

仅限CSS（因为您的问题仅标记为css）：

.main-nav li:first-of-type
{
    display:none;
}

除IE8及更早版本外，所有主流浏览器均支持:first-of-type选择器。