CSS3奇数行甚至只有可见行

我想要条纹交替元素的颜色。但我希望行颜色只交替可见的行。如果你看看下面这个是我试图让它工作的尝试。CSS3奇数行甚至只有可见行

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

来源

2013-02-25 vdh_ant

你不能用CSS做到这一点。你必须诉诸JavaScript。 – 2013-02-25 03:06:00

如果您可以更改隐藏文本的元素类型，比如说，我们可以说..span – 2013-02-25 03:13:43

@one我尝试从您的书中抽出一片叶子并尝试这种方法，但它无效 - http://jsfiddle.net/kuwFp/15/ – 2013-02-25 04:16:59

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

它仍然可以让你通过使.hide后元素与:nth-child交替的颜色做死板他们应该是：

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

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

来源

2013-02-25 03:07:42

诀窍是用不同的标签隐藏行，而不是类。在我的例子中，我使用“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>

来源

2017-02-04 06:06:19 kornieff

CSS3奇数行甚至只有可见行

回答

相关问题