html - 除非 html 元素发生更改，否则 nth-of-type 不起作用

Question

我被这个问题逼疯了。我试图通过使用 nth-of-type 来定位具有特定类的 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。我希望它只查看类(class)的计数。

感谢您的帮助!

Answer 1

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

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

说明:您的要求希望跳过奇数序列中的所有其他元素，即属性应命中 (1,5,9,13....)，而不是 (1,3,5,7,9,11....)。 ...) 等等。为此，我们为参数提供了一个计算公式，因此 css 所做的是将索引 (0,1,2,3) 作为每个 .employee-group 元素的 n 并计算应用位置基于公式结果的属性如下

(4n+1) = 目标数

(4x0+1)= 1

(4x1+1)= 5

(4x2+1)= 9

(4x3+1)= 13

...等等。

我相信这应该可以解决您的问题。

希望这有帮助。