CSS3奇数和偶数仅可见行

Question

我正在尝试对交替元素的颜色进行条纹处理。但我希望行颜色仅交替可见行。如果您看一下下面的内容，这是我试图让它发挥作用的尝试。

<!DOCTYPE html>
<html>
<head>
<style>
p:not(.hide):nth-child(odd)
{
background:#ff0000;
}
p:not(.hide):nth-child(even)
{
background:#0000ff;
}
.hide { display:none; }
</style>
</head>
<body>

<p>The first paragraph.</p>
<p class="hide">The second paragraph.</p>
<p>The third paragraph.</p>

</body>
</html>

Answer 1

您无法使用纯 CSS 来执行此操作，因为

:nth-child

选择器是根据元素计算的，并且

:not

不会过滤 DOM 中的元素位置。您需要使用 JavaScript 来获得完全灵活的解决方案。

您仍然可以通过使 .hide 之后的元素与

:nth-child

交替其应有的颜色来做到这一点

不灵活

：

.hide + p:nth-child(odd) {
    background: #0000ff;    
}

你可以继续为越来越多的同级

.hide

和

的组合添加类似的规则，但这非常不灵活。

Answer 2

技巧是隐藏具有不同标签而不是类的行。在我的示例中，我使用“del”标签来隐藏。

.list div:nth-of-type(odd) { background: ghostwhite; }
.list del { display: none; }

<div class="list">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <del>4</del>
  <div>5</div>
  <del>6</del>
  <div>7</div>
</div>

Answer 3

如果您有权访问隐藏和显示元素的代码，则可以在每个原始隐藏元素之后添加另一个辅助隐藏元素，以便为 css 选择器保留奇偶校验。另外，当原始元素再次显示时，请删除以下每个隐藏的辅助元素。

Answer 4

迟来的答案：现在我们可以使用

:nth-child(nth of selector)

语法，根据 MDN，大多数“常青”浏览器（CR 111、FF 113、Safari 9）应该支持该语法。

.list div:nth-child(odd of :not([hidden])) { background: ghostwhite; }
[hidden] { display: none; }

<div class="list">
  <div>1</div>
  <div hidden>2</div>
  <div>3</div>
  <div hidden>4</div>
  <div>5</div>
  <div hidden>6</div>
  <div>7</div>
</div>

CSS3奇数和偶数仅可见行

问题描述投票：0回答：4

4个回答

最新问题

CSS3奇数和偶数仅可见行

问题描述 投票：0回答：4

4个回答

最新问题

问题描述投票：0回答：4