html - css:如何跳过第n个 child (奇数)和第n个 child (偶数)中隐藏的 child

标签 html css

<分区>

我尝试在使用第 nth-child(odd) 和 nth-child(even) 时跳过隐藏的 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>

我想在浏览器上显示的列表应该有替代颜色,而不管隐藏的 child 的数量。

最佳答案

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

关于html - css:如何跳过第n个 child (奇数)和第n个 child (偶数)中隐藏的 child ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34432967/

相关文章:

html - Css 背景图像未出现

html - YouTube HTML5 API - 在轮询播放器当前时间时是否可以获得更好的时间分辨率?

html - 使用 background-image over img 属性的响应图像

html - 为什么在垂直居中后我的 div 顶部有额外的间距?

css - 按比例放大缩小(ctrl +-)整个网页纯CSS

javascript - 如何在 JavaScript 中添加 HTML 标签

javascript - 在 html/css 中触发 oncilck 事件时按钮的意外行为

html - 内部 div 不会垂直居中或左对齐

javascript - JQuery 查找和更改字符串的样式

html - CSS Trebuchet MS 与 Photoshop Trebuchet MS