6

交互の要素の色をストライプ化しようとしています。ただし、行の色は表示されている行のみを交互に表示する必要があります。以下をご覧になると、それを機能させるための私の試みがここにあります。

http://jsfiddle.net/kuwFp/3/

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

3 に答える 3

5

:nth-childセレクターは要素に関して計算さ:notれ、DOM 内の要素の位置をフィルタリングしないため、純粋な CSS ではこれを行うことはできません。完全に柔軟なソリューションを実現するには、JavaScript を使用する必要があります。

後で要素を別の色にすることで、これを柔軟に行うことができます。.hide:nth-child

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

.hide兄弟とのより多くの組み合わせに対して同様のルールを追加し続けることができますがp、これは非常に柔軟性がありません。

于 2013-02-25T03:07:42.653 に答える