CSS:如何在nth-child(odd)和nth-child(even)中跳过隐藏的子级 [英] css: How to skip hidden child in nth-child(odd) and nth-child(even)

问题描述

我尝试在使用nth-child(odd)和nth-child(even)时跳过隐藏的子项，但是它不会跳过那些隐藏的记录.

I am try to skip hidden child while using nth-child(odd) and nth-child(even), but it does not skip those hidden records.

我有以下HTML和CSS代码.

i have the following HTML and CSS code.

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

我要列出的显示在浏览器上的颜色应该具有其他颜色，而与隐藏子项的数量无关.

I want to list displaying on the browser should have alternative color irrespective of the number of hidden children.

推荐答案

如果可以更改文档的结构，则可以为隐藏项设置一个不同的标签，以便可以利用:nth-of-type 伪类:

If you could change your document's structure, then you could set a different tag for the hidden items, so that you could take advantage of the :nth-of-type pseudo-class:

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>

这篇关于CSS:如何在nth-child(odd)和nth-child(even)中跳过隐藏的子级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！