CSS3奇偶仅可见行答案

【问题标题】：CSS3 odd and even only visible rowsCSS3奇偶仅可见行
【发布时间】：2013-02-25 02:56:45
【问题描述】：

我正在尝试对交替元素的颜色进行条纹。但我希望行颜色仅交替可见行。如果您查看以下内容，这是我尝试使其正常工作的尝试。

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

【问题讨论】：

你不能用 CSS 做到这一点。您将不得不求助于 JavaScript。
如果您可以更改隐藏文本的元素类型，比如说..span，这是可能的
@one 我试着从你的书中摘下一片叶子并尝试了这个，但它没有用 - jsfiddle.net/kuwFp/15
不，我的意思是like this。 nth-of-type 将只计算相同类型的元素...
@OneTrickPony 问题是在我的情况下，它们都以 div 开始，我需要将它们更改为隐藏的跨度。这不是直接的 dom 更改。

标签： css css-selectors

【解决方案1】：

你不能用纯 CSS 做到这一点，因为 :nth-child 选择器是根据元素计算的，:not 不会过滤 DOM 中的元素位置。您需要使用 JavaScript 来获得完全灵活的解决方案。

您仍然可以不灵活地做到这一点，方法是让.hide 之后的元素与:nth-child 交替它们应为的颜色：

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

您可以继续为兄弟.hide和p的越来越多的组合添加类似的规则，但这非常不灵活。

【讨论】：

【解决方案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>

【讨论】：

不确定这是否符合标准，但确实很整洁。
@GregSchmit，请分享您所指的“标准”。谢谢。
标准将是 HTML5（或 HTML 5.2），来自 W3 的当前 HTML 标准或 WHATWG 生活标准。它在查找后确实符合标准（因此我的陈述中的“不确定”部分）。我不确定<del> 标签是否可以在<div> 这样的标签下，因为我一直在<p> 标签下使用它们。合法：developer.mozilla.org/en-US/docs/Web/Guide/HTML/…

【解决方案3】：

如果您可以访问隐藏和显示元素的代码，您可以在每个原始隐藏元素之后添加另一个辅助隐藏元素，因此将为 css 选择器保留奇偶性。另外，当原来的辅助元素再次出现时，删除后面的每个隐藏辅助元素。

【讨论】：