CSS：如何在nth-child（奇数）和nth-child（偶数）中跳过隐藏的子元素？

Question

我正在尝试使用nth-child(odd)和nth-child(even)跳过隐藏的子元素，但它无法跳过那些隐藏的记录。

我有以下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>

我希望在浏览器上显示的列表具有备选颜色，而不管隐藏子项的数量。

- Musarrat Hussain

---

你是否接受 JavaScript 的解决方案？ - Little Santi

不，我不想使用 JavaScript，我知道 JavaScript 中的解决方案，但是我受限制不能使用 JavaScript，我必须使用 CSS。 - Musarrat Hussain

这在CSS中是不可能的，您可能需要修改HTML或选择jQuery解决方案。 - Deepak Yadav

您能够插入额外的LI虚拟元素吗？ - Little Santi

@Musarrat Hussain，由于这个问题已经关闭，而我还有两个更好的选择可以提供，你最好再次提问，避免提到“nth-child”：假设你只想给偶数/奇数行不同的颜色，而其中一些行是不可见的。 - Little Santi

Answer 1

如果您可以更改文档的结构，那么您可以为隐藏的项目设置不同的标签，以便利用: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>

- Little Santi

---

如果我们更改您所完成的元素类型，则它可以工作，但我无法更改元素类型。因为基于某些事件，隐藏类可能会更改，那么我也必须更改元素类型。 - Musarrat Hussain

Answer 2

正如这个答案所解释的那样，目前没有仅使用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

- Useless Code

Answer 3

你需要从DOM中移除隐藏的元素，而不仅是将它们隐藏。

- David Bradshaw

---

由于所有的子元素都是动态创建的，并且在不同的事件中切换隐藏/显示，因此我无法在每个事件中删除和添加所有这些子元素。 - Musarrat Hussain

https://dev59.com/CW035IYBdhLWcg3wPNZk - David Bradshaw