Question

我被这个问题所驱使。我试图通过使用nth-of类型来定位具有特定类的div的每个其他实例。当HTMl元素被更改时，我已经获得了nth-of-type的工作，但是当它只是div时，我没有。一定是我不理解正确的事情，所以感谢你对此的帮助！

这是一个例子，接近我需要的内容（除了内部标签应该是div）：

.employee-group {
    border: 1px solid green;
}

.employee-group:nth-of-type(odd) {
        background-color: blue;
}

<div class="employee-group">
    <p class="employee">Odd</p>
    <p class="employee">Div</p>
</div>
<section>
    <p>Section</p>
</section>
<div class="employee-group">
    <p class="employee">Even .employee-group</p>
    <p class="employee">Works as expected, no background color</p>
</div>
<section>
    <p>Section</p>
</section>
<div class="employee-group">
    <p class="employee">Odd</p>
    <p class="employee">Div</p>
</div>
<section>
    <p>Section</p>
</section>

http://codepen.io/usern4me/pen/BLZjJj

以下是我需要工作的场景，但对于我的生活，我无法做到：

.employee-group {
    border: 1px solid green;
}

.employee-group:nth-of-type(odd) {
        background-color: blue;
}

<div class="employee-group">
    <p class="employee">Odd</p>
    <p class="employee">Div</p>
</div>
<div>
    <p>Even</p>
    <p>Div</p>
</div>
<div class="employee-group">
    <p class="employee">Odd div</p>
    <p class="employee">But even .employee-group (shouldn't have bg color!!!)</p>
</div>
<div>
    <p>Even</p>
    <p>Div</p>
</div>
<div class="employee-group">
    <p class="employee">Odd</p>
    <p class="employee">Div</p>
</div>
<div>
    <p>Even</p>
    <p>Div</p>
</div>

http://codepen.io/usern4me/pen/YGbwEb

似乎第n类型的选择器与类匹配，并且它是div总数中的奇数div。我希望它只是看一下计数的类。

感谢您的帮助！

Answer 1

对于偶数.employee-group问题，请将.employee-group:nth-of-type(odd)更改为

.employee-group:nth-of-type(4n+1)

解释：你的要求想要跳过奇数序列中的所有其他项目，而不是（1,3,5,7,9,11 ....）属性应该命中（1,5,9,13。 ...）等为了做到这一点，我们给参数一个公式来计算，所以css所做的是将索引（0,1,2,3）作为每个.employee-group元素的n并计算应用的位置基于公式结果的属性

（4n + 1）=目标数

（4x0 + 1）= 1

（4x1 + 1）= 5

（4x2 + 1）= 9

（4x3 + 1）= 13

......等等。

这应该可以解决你的问题。

希望这有帮助。

除非html元素发生变化，否则nth-of-type无法正常工作

1 个答案: