可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I'm trying to stripe the colours of alternating elements. But I want the row colors to alternate only the visible rows. If you have a look at the below here is my attempt at trying to get it working.

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>

回答1:

You can't do this with pure CSS because the :nth-child selector is calculated with respect to the element and :not does not filter element position in the DOM. You need to use JavaScript for a fully flexible solution.

It's still possible for you to do this inflexibly by making elements after .hide with :nth-child alternate the color they should be:

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

You can continue to add similar rules for more and more combinations of sibling .hide and p, but this is very inflexible.

回答2:

The trick is to hide a row with different tag, not class. In my example I use "del" tag to hide.

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

CSS3 odd and even only visable rows

问题:

回答1:

回答2:

收藏的人(0)

CSS3 odd and even only visable rows

问题:

回答1:

回答2:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮