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奇數行甚至只有可見行

回答

相關問題