Question

我正在开发一个评论系统，我需要让所有其他孩子<div>（即使是第一个孩子的孩子）也可以选择CSS。

例如，假设我有这个标记（为简单起见省略了不需要的结束标记）：

 <body>
<div class="comment">
    <div class="comment"/>
    <p class="something else"/>
    <div class="comment">
        <div class="comment"/>
        <div class="comment"/>
    </div>
</div>
<div class="comment"/>
<div class="comment"/>
</body>

如何在正文中选择所有其他 <div>（<p>除外）？

我基本上想要的是这样：

（两颗星是偶数，一颗星是奇数，常规不是）

 <body>
    **<div class="comment">**
        *<div class="comment"/>*
        <p class="something else"/>
        **<div class="comment">**
            *<div class="comment"/>*
            **<div class="comment"/>**
        </div>
    </div>
    *<div class="comment"/>*
    **<div class="comment"/>**
    </body>

我需要它按顺序遍历每个其他<div>，应用样式。

有没有这样做？

Answer 1

<强> - Advanced demo with multiThread colored comments
的 - Simple demo

呃这需要一段时间才能从OP了解＆＃34;偶然＆＃34; / ＆＃34;奇怪＆＃34; 实际上是不是CSS even和odd，而是.comment div的外观索引，（嵌套与否）。< / p>
<强> CSS ？即使不是不可能，也几乎不可能。（可能只有嵌套太多样式才能涵盖所有可能性）

使用 jQuery ，就像：

$('.comment').addClass(function(i){ return i%2 ? "odd" : "even"; });

其中i表示在其上收集的.comment元素jquery的Element的数组索引位置（0,1,2,3 ...）。现在，如果i reminder 2返回0，则添加"even"类，否则:将"odd"类添加到该元素。

<强> CSS：

div.comment{ /* Common styles */ color:#fff; margin:5px; border:1px solid #000; } .even { background:blue; } /* jQ Index: 0, 2, 4, 6, 8... */ .odd { background:red; } /* jQ Index: ...1, 3, 5, 7... */

我如何使用：nth-child（）来选择所有子节点中的每个其他<div>？</div>

1 个答案:

我如何使用：nth-​​child（）来选择所有子节点中的每个其他<div>？</div>

1 个答案:

我如何使用：nth-child（）来选择所有子节点中的每个其他<div>？</div>