css - 隐藏第一个 <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;
}