Question

我尝试在使用nth-child（奇数）和nth-child（偶数）时跳过隐藏的孩子，但它不会跳过那些隐藏的记录。

我有以下HTML和CSS代码。

<style>
  ul {
    list-style-type: none;
  }
  li {
    height: 2em;
    border: 1px solid black;
  }
  /* li:not(.hidden):nth-child(odd) { */
  li:nth-child(odd) {
    background: khaki;
  }
  li:nth-child(even) {
    background: indianred;
  }
  .hidden {
    display: none;
  }
</style>


<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li class="hidden">4</li>
  <li class="hidden">5</li>
  <li class="hidden">6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
</ul>

我想在浏览器上列出显示应该有其他颜色，而不管隐藏的孩子数量。

Answer 1

作为this answer explains，目前没有办法纯粹使用CSS。您可以通过更改隐藏li元素的代码来解决此问题，以便在隐藏项目之后插入另一个隐藏的虚拟元素，使其看起来正确，然后在您取消时删除该虚拟项目 - 隐藏它。

var hide = function (el) {
    el.classList.add('hidden');
    el.insertAdjacentHTML('afterend', '<li class="hidden dummy"></li>');
  },
  show = function (el) {
    if (el.classList.contains('hidden')) {
      el.classList.remove('hidden');
      el.parentNode.removeChild(el.nextElementSibling);
    }
  };

Working fiddle here

Answer 2

如果您可以更改文档的结构，则可以为隐藏项设置不同的标记，以便您可以使用:nth-of-type伪类的高级：

<强> CSS：

  div.list p {
    height: 2em;
    border: 1px solid black;
    margin: 0;
  }
  div.list p:nth-of-type(odd) {
    background: khaki;
  }
  div.list p:nth-of-type(even) {
    background: indianred;
  }
  .hidden {
    display: none;
  }

<强> HTML：

<div class="list">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <span class="hidden">4</span>
  <span class="hidden">5</span>
  <span class="hidden">6</span>
  <p>7</p>
  <p>8</p>
  <p>9</p>
  <p>10</p>
  <p>11</p>
</div>

Answer 3

您需要从DOM中删除隐藏的元素，而不是仅隐藏它们。

css：如何跳过第n个孩子（奇数）和第n个孩子（偶数）中隐藏的孩子

3 个答案: