小编Mus*_*ain的帖子

css:如何跳过n-child(单数)和n-child(偶数)中隐藏的孩子

我尝试在使用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>
Run Code Online (Sandbox Code Playgroud)

我想在浏览器上列出显示应该有替代颜色,而不管隐藏的孩子的数量.

html css

6
推荐指数
1
解决办法
3914
查看次数

标签 统计

css ×1

html ×1