如何使用 :nth-child() 来选择所有孩子中的所有其他 <div> ？
Posted
技术标签:
【中文标题】如何使用 :nth-child() 来选择所有孩子中的所有其他 <div> ？【英文标题】：How can I use :nth-child() to select every other <div> within ALL children? 【发布时间】：2014-11-01 03:27:28 【问题描述】：我正在开发一个 cmets 系统，我需要使用 CSS 选择所有其他孩子 <div>（甚至是第一个孩子的孩子）。
例如，假设我有这个标记（为了简单起见，省略了不需要的结束标签）：
<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>，应用样式。
有没有办法做到这一点？
【问题讨论】：
如果你想选择div元素而不是p元素，你需要nth-of-type而不是nth-child。
@JoshCrozier 我认为 OP 也想选择 nested divs，然后通过 odd/even 设置所有样式，这甚至是不可能的nth-of-type伪类。
@HashemQolami 我知道他想选择嵌套元素。无论如何，我的观点仍然成立，应该使用 nth-of-type，因为元素类型不同。
@HashemQolami 这是正确的。你是说基本上没有办法做到这一点？如果是这样，我将不得不向我正在使用的 CMS 添加一些自定义功能。还是谢谢！
@JoshCrozier 有趣。我将检查第 n 个类型。
【参考方案1】：
- Advanced demo with multiThread colored comments- Simple demo
呃，这花了一段时间才从 OP 那里了解到 "even" / "odd" 实际上 不是 CSS 的 even和odd，但.comment div 的外观索引，（嵌套与否）。
CSS？即使不是不可能，也几乎不可能。 （只有嵌套太多样式以覆盖所有可能性时才有可能）
使用 jQuery 就像：
$('.comment').addClass(function(i)
return i%2 ? "odd" : "even";
);
其中i 表示在其途中收集的.comment 元素jquery 的元素数组索引位置（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> ？的主要内容，如果未能解决你的问题，请参考以下文章