选择排除隐藏孩子的奇偶孩子

问题描述

第 3 行是隐藏的 <div> .我不希望从 odd/even css 规则中获取那个.

Line 3 is a hidden <div> . I don't want that one to be taken from the odd/even css rule.

实现此功能的最佳方法是什么?

What is the best approach to get this to work?

.hidden {display:none;}
.box:not(.hidden):nth-child(odd)  { background: orange; }
.box:not(.hidden):nth-child(even) { background: green;  }

<div class="wrap">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box hidden">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
</div>

http://jsfiddle.net/k0wzoweh/

注意:隐藏元素可以有多个.

Note: There can be multiple hidden elements.

推荐答案

伪选择器不会堆叠，所以你的 :not 不会影响 :nth-child (也不会影响 :nth-of-type 等

Pseudo-selectors don't stack, so your :not doesn't affect the :nth-child (nor would it affect :nth-of-type etc.

如果你可以使用 jQuery，你可以在那里使用 :visible 伪选择器，尽管这不是 CSS 规范的一部分.

If you can resort to jQuery, you can use the :visible pseudo-selector there, although that's not a part of the CSS spec.

如果您正在生成 HTML 并且可以更改它，您可以在运行时应用奇数/偶数逻辑，例如在 PHP 中:

If you're generating the HTML and can change that, you can apply odd/even with logic at run-time, eg in PHP:

foreach ($divs AS $i => $div) {
    echo '<div class="box ' . ($i % 2 ? 'even' : 'odd') . '">x</div>';
}

甚至尝试做一些棘手的事情，比如

Even trying to do something tricky like

.box[class='box']:nth-of-type(even)

不起作用，因为伪选择器甚至不会堆叠到属性选择器上.

doesn't work, because the psuedo-selector doesn't even stack onto the attribute selector.

我不确定是否有任何方法可以纯粹使用 CSS 来做到这一点 - 我现在想不出任何方法.

I'm not sure there's any way to do this purely with CSS - I can't think of any right now.

这篇关于选择排除隐藏孩子的奇偶孩子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！