css - 先隐藏元素

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;
}

:first-of-type除了 IE8 和更早版本，所有主要浏览器都支持选择器。