Javascript 第n种类型，包括其他元素

我有一个网格的项目后，某些项目是有一个间隔。我已尝试使用类型为：n的

：n将样式应用于我不希望应用于右侧的第一列项目。然而，当我使用分隔符时，CSS似乎会变得混乱


正如您所看到的，计数在每个额外的div之后都会停止，但是CSS应该只考虑每个
.box

有没有办法让它只影响每一项？我只希望第一列有特定的样式，我也很乐意使用JS解决方案

HTML

事实上，它的工作原理应该是这样的<代码>：类型的第n个

转换为父元素的该类型的编号（div）。因此，您可以通过在分隔符之间将框包装在简单的父元素中来轻松解决问题：

.box{
宽度：48%；
浮动：左；
高度：30px；
背景：#ccc；
}
.box：第n个类型（奇数）{
保证金权利：4%；
背景色：红色；
}
.拆分器{
宽度：100%；
浮动：左；
}

1.
2.
3.
4.
分离器
1.
2.
3.
分离器
1.
2.
3.
4.
5.
6.
7.
8.

这是对

：nth-of-type（）

的误解。它正在寻找元素的类型（div），也就是（奇数），并且只将样式应用于那些同样属于

class=“box”

的元素

您的第五个div是一个拆分器，即使它没有

class=“box”

，它仍然会被计数。它只是没有应用样式，因为选择器指定了类型的第n个。您的下一个单数是位于拆分器之间的

2

如果你还没有理解，那就是计算你容器中的所有div。仅仅因为在

.box

div中有一个偶数作为文本，并不能使它们在div的“列表”中的编号相等

既然您在评论中说您不能编辑标记，下面是一个jQuery实现（感谢BoltClock的帮助）：

var container=document.getElementById（“搜索结果”）；
var后代=container.getElementsByTagName（“div”）；
var x，i=0；
对于（x=0；x<0.length；x++）{
var nth=$（后代）.eq（x）；
if（n.hasClass（“拆分器”））{
i=0；
继续；
}
如果（n.hasClass（“框”））{
如果（i%2==0）{
N.addClass（“奇数”）；
}
i++；
}
};
.box{
宽度：48%；
浮动：左；
高度：30px；
背景：#ccc；
}
.奇怪{
保证金权利：4%；
背景色：红色；
}
.拆分器{
宽度：100%；
浮动：左；
}

1.
2.
3.
4.
分离器
1.
2.
3.
分离器
1.
2.
3.
4.
5.
6.
7.
8.
我认为这是对选择器工作原理的误解。
.box
选择器不限制类型的
：n个
选择器。它充当附加的子过滤器。在这种情况下，选择所有奇数div，然后在这些奇数div中，使用
框
类设置样式

在您的示例中，本例中的奇数div为：

<div>
    <div class="box">1</div> <!-- Odd -->
    <div class="box">2</div>
    <div class="box">3</div> <!-- Odd -->
    <div class="box">4</div>
    <div class="splitter">splitter</div> <!-- Odd -->
    <div class="box">1</div>
    <div class="box">2</div> <!-- Odd -->
    <div class="box">3</div>
    <div class="splitter">splitter</div> <!-- Odd -->
    <div class="box">1</div>
    <div class="box">2</div> <!-- Odd -->
    <div class="box">3</div>
    <div class="box">4</div> <!-- Odd -->
    <div class="box">5</div>
    <div class="box">6</div> <!-- Odd -->
    <div class="box">7</div>
    <div class="box">8</div> <!-- Odd -->
</div>

匹配其他过滤器要求，即它们还必须包含类
框

示例：

下面是一个使用多个选择器来创建css范围的示例。如果您不能像其他一些答案所建议的那样更改HTML结构，这将非常有用：


.box{
宽度：48%；
浮动：左；
高度：30px；
背景：#ccc；
}
.box:n个子项（n+1）：n个子项（奇数）：n个子项（-n+4），
.box:n个孩子（n+6）：n个孩子（偶数）：n个孩子（-n+8），
.box:n个孩子（n+10）：n个孩子（偶数）：n个孩子（-n+17），
.box:n子项（n+19）：n子项（奇数）：n子项（-n+21）{
保证金权利：4%；
背景色：红色；
}
.拆分器{
宽度：100%；
浮动：左；
}

1.
2.
3.
4.
分离器
1.
2.
3.
分离器
1.
2.
3.
4.
5.
6.
7.
8.
分离器
1.
2.
3.
@Tim你误解了。我说过它不算，这意味着它不符合选择器的条件。这与我其余的回答是一致的。我将对其进行编辑以使其更清晰。您可以为分隔符添加具有不同类型元素的代码段（如
hr
），并根据OP的分隔符对其进行样式设置。只是为了提供另一种解决方案。：）@Tim True，但现在我要去吃午饭了：-Pun幸运的是，该结构是作为搜索结果页面动态构建的，因此向页面添加不同的结构并不像看上去那么容易。@SamWillis您能向容器div添加类名或ID吗？不幸的是，该结构是动态构建的搜索结果页面，因此向页面添加不同的结构并不像看上去那么容易。浏览器支持如何？@Tim。CSS3
：第n个子
选择器在所有主流浏览器中都有支持，甚至在IE 8中也有部分支持。您知道这也包括了
n+x
部分吗？我个人对此表示怀疑。@Tim是的，除了上面提到的IE 8之外。这里有两个额外的资源显示浏览器支持，如果你还有疑问…@Tim谢谢！你的也是。我个人喜欢修复HTML结构以支持所需布局的想法，但如果它像OP所说的那样被锁定，最好有一个备份。我已经提名重新打开这个问题，因为这是一个JavaScript/jQuery解决方案，而目标问题严格来说只是CSS（答案是不同的；在CSS中你不能，但在JS中你可以）。
.box {
    width: 48%;
    float: left;
    height: 30px;
    background: #ccc;
}

.box:nth-of-type(odd){
    margin-right: 4%;
    background-color: red;
}

.splitter {
    width: 100%;
    float: left;
}

<div>
    <div class="box">1</div> <!-- Odd -->
    <div class="box">2</div>
    <div class="box">3</div> <!-- Odd -->
    <div class="box">4</div>
    <div class="splitter">splitter</div> <!-- Odd -->
    <div class="box">1</div>
    <div class="box">2</div> <!-- Odd -->
    <div class="box">3</div>
    <div class="splitter">splitter</div> <!-- Odd -->
    <div class="box">1</div>
    <div class="box">2</div> <!-- Odd -->
    <div class="box">3</div>
    <div class="box">4</div> <!-- Odd -->
    <div class="box">5</div>
    <div class="box">6</div> <!-- Odd -->
    <div class="box">7</div>
    <div class="box">8</div> <!-- Odd -->
</div>

<div>
    <div class="box">1</div> <!-- Odd w/ class box -->
    <div class="box">2</div>
    <div class="box">3</div> <!-- Odd w/ class box -->
    <div class="box">4</div>
    <div class="splitter">splitter</div>
    <div class="box">1</div>
    <div class="box">2</div> <!-- Odd w/ class box -->
    <div class="box">3</div>
    <div class="splitter">splitter</div>
    <div class="box">1</div>
    <div class="box">2</div> <!-- Odd w/ class box-->
    <div class="box">3</div>
    <div class="box">4</div> <!-- Odd w/ class box -->
    <div class="box">5</div>
    <div class="box">6</div> <!-- Odd w/ class box -->
    <div class="box">7</div>
    <div class="box">8</div> <!-- Odd w/ class box-->
</div>