nth-of-type包括其他元素

时间：2016-03-30 16:36:04

标签： javascript jquery html css

我有一个项目网格，在某些项目之后会有一个间隔符。我尝试使用:nth-of-type将样式应用于我不想应用于右侧的第一列项目。但是，当我有分隔符时，CSS似乎感到困惑。

https://jsfiddle.net/yquw291h/2/

正如你所看到的那样，每增加一个div后计数就会消失，但CSS肯定只考虑每个.box？

有没有办法可以让它只影响每个项目？我只希望第一列有某些样式，我也很高兴使用JS解决方案。

HTML 

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

CSS 

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

3 个答案:

答案 0 :(得分：7)

这是对:nth-of-type()的误解。它正在寻找元素（div）的类型，也是（奇数），并且只将样式应用于同样为class="box"的那些。

你的第5个div是一个分割器，即使它没有class="box"，它仍然被计算在内。它没有应用样式，因为您的选择器指定 .box nth-of-type。你的下一个奇怪的是分裂者之间的<div class="box">2</div>。

如果您还没有抓住，它会计算您容器中的所有div。只是因为.box div中的文本是偶数，所以不会在＆＃34;列表＆＃34;中对它们进行均匀编号的条目。 divs。

由于您在评论中说您无法编辑标记，因此这是一个jQuery实现（感谢BoltClock的帮助）：

＆＃13;
＆＃13; 
var container = document.getElementById("search-results");
var descendants = container.getElementsByTagName("div");
var x, i = 0;
for (x = 0; x < descendants.length; x++) {
    var nth = $(descendants).eq(x);
    if (nth.hasClass("splitter")) {
    	i = 0;
    	continue;
    }
    if (nth.hasClass("box")) {
        if (i % 2 == 0) {
            nth.addClass("odd");
        }
        i++;
    }
};
＆＃13; 
.box {
    width: 48%;
    float: left;
    height: 30px;
    background: #ccc;
}

.odd {
    margin-right: 4%;
    background-color: red;
}

.splitter {
    width: 100%;
    float: left;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="search-results">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="splitter">splitter</div>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="splitter">splitter</div>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
</div>
＆＃13;
＆＃13;
＆＃13;

您可以修改您的标记，因为Tim的回答建议您在不使用JavaScript的情况下实现您正在寻找的内容。或者您可以使用一组不同的元素来进行修改。但是只有在分隔符之间的每个部分中有一个甚至数量的div时，这才有效:(我已经评论了每个元素的编号状态，关于选择器你是什么？重新使用）。

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<div>
    <div class="box">1</div> <!-- odd -->
    <div class="box">2</div> <!-- even -->
    <div class="box">3</div> <!-- odd -->
    <div class="box">4</div> <!-- even -->
    <hr class="splitter"/> <!-- N/A -->
    <div class="box">1</div> <!-- odd -->
    <div class="box">2</div> <!-- even -->
    <div class="box">3</div> <!-- odd -->
    <div class="box">3</div> <!-- even -->
    <hr class="splitter"/> <!-- N/A -->
    <div class="box">1</div> <!-- even -->
    <div class="box">2</div> <!-- odd -->
    <div class="box">3</div> <!-- even -->
    <div class="box">4</div> <!-- odd -->
    <div class="box">5</div> <!-- even -->
    <div class="box">6</div> <!-- odd -->
    <div class="box">7</div> <!-- even -->
    <div class="box">8</div> <!-- odd -->
</div>
＆＃13;
＆＃13;
＆＃13;

此时需要问一个问题，为什么需要列？如果您有某种表格数据，则应使用<table> s。如果你只想要两个并排的列，为什么不把一组div放在＆＃34; left＆＃34;容器和其他人在＆＃34;权利＆＃34;容器？这样，您就可以通过.left div {}和.right div {}选择器整体设置它们。

答案 1 :(得分：5)

实际上它的工作方式应该如此。 :nth-of-type转换为父元素的此类型（div）的数量。因此，您可以通过将框包装在分隔符之间的简单父元素中来轻松解决问题：

.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>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
  </div>
    <div class="splitter">splitter</div>
  <div>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
  </div>
    <div class="splitter">splitter</div>
  <div>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
  </div>
</div>

答案 2 :(得分：2)

我认为这是对:nth-of-type选择器如何工作的误解。 .box选择器不会限制:nth-of-type选择器。它充当额外的子过滤器。在这种情况下，选择所有奇数div，然后选择那些具有box类的奇数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>

但是，在上面列出的那些奇怪的divs中，只有这些：

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

匹配其他过滤器要求，因为它们还必须包含类box。

示例：

下面是一个示例，说明如何使用多个:nth-child选择器来创建css范围。如果您无法像其他一些答案那样改变您的HTML结构，这将非常有用：

.box {
  width: 48%;
  float: left;
  height: 30px;
  background: #ccc;
}

.box:nth-child(n+1):nth-child(odd):nth-child(-n+4),
.box:nth-child(n+6):nth-child(even):nth-child(-n+8),
.box:nth-child(n+10):nth-child(even):nth-child(-n+17),
.box:nth-child(n+19):nth-child(odd):nth-child(-n+21){
  margin-right: 4%;
  background-color: red;
}

.splitter {
  width: 100%;
  float: left;
}
<div>
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="splitter">splitter</div>
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="splitter">splitter</div>
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="splitter">splitter</div>
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

注意：上述标记比您问题中提供的标记稍微广泛一些。它基于您的完整jsfiddle标记，而不是您问题中包含的缩短版本。

Here是您的小提琴更新，以包含上面显示的更改。

相关问题
最新问题