第n个孩子的问题是，它不尊重班级的名字

Question

我想了解为什么第n个子(偶数(会得到第一个元素？我使用.section只是为了获得具有此类的div，但它占用了所有元素。

.section:nth-child(even), .fernandoclass:nth-child(even){
color:red
}

我创建了一个PEN，试图向你们展示正在发生的事情：

https://codepen.io/fernandocacavaio/pen/gOMJoxE

更新：我创建了一个CodePen来准确地显示我正在尝试做的事情，我的页面上有两种不同类型的PANEL，我使用它们之间的行反转，一开始图像在右侧，下一个将图像在左侧。。。

但是在这个新的CodePen中(https://codepen.io/fernandocacavaio/pen/vYKEXPo)。我有一个类为testfernando的div，这个div正在破坏我的逻辑，使行反向。如果您删除这个DIV，您会注意到下一个面板将尊重行的反向。

Answer 1

您使用了:nth-child()而不是:nth-of-type()。

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-子

：nth-child((CSS伪类根据元素在一组同级中的位置来匹配元素。

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-类型

：nth-of-type((CSS伪类根据给定类型(标记名(的元素在一组同级元素中的位置来匹配它们。

采样以查看两个伪选择器之间的差异：

.section:nth-child(even), .fernandoclass:nth-child(even){
color:red
}
.section:nth-of-type(even), .fernandoclass:nth-of-type(even){
text-decoration: underline;
}

<div id="alo">
fafsaadsadsadsada
</div>
<section class="section">
<div class="sectioninside">
afee
</div>
</section>
<div id="alo">
fafsaadsadsadsada
</div>
<div id="alo">
fafsaadsadsadsada
</div>
<section class="section">
<div class="sectioninside">
afee
</div>
</section>
<div class="fernandoclass">
fernando
</div>
<section class="section">
<div class="sectioninside">
afee
</div>
</section>
<section class="section">
<div class="sectioninside">
afee
</div>
</section>

Answer 2

我在每个HTML元素后面的HTML注释中添加了选择器，这样您就可以看到这里发生了什么。您的选择器工作正常。

最重要的是要记住，id、class、attribute selector或其他任何东西都不会影响nth-of-type数。

nth-of-type数字唯一计数的是元素类型。

---

工作示例：

.section:nth-of-type(even),
.fernandoclass:nth-of-type(even){
color: red;
}

<div id="alo"> <!-- #alo:nth-of-type(1) -->
fafsaadsadsadsada
</div>
<section class="section"> <!-- .section:nth-of-type(1) -->
<div class="sectioninside">
afee
</div>
</section>
<div id="alo"> <!-- #alo:nth-of-type(2) -->
fafsaadsadsadsada
</div>
<div id="alo"> <!-- #alo:nth-of-type(3) -->
fafsaadsadsadsada
</div>
<section class="section"> <!-- .section:nth-of-type(2) -->
<div class="sectioninside">
afee
</div>
</section>
<div class="fernandoclass"> <!-- .fernandoclass:nth-of-type(4) -->
fernando
</div>
<section class="section"> <!-- .section:nth-of-type(3) -->
<div class="sectioninside">
afee
</div>
</section>
<section class="section"> <!-- .section:nth-of-type(4) -->
<div class="sectioninside">
afee
</div>
</section>
<div class="fernandoclass"> <!-- .fernandoclass:nth-of-type(5) -->
fernando
</div>
<div class="fernandoclass"> <!-- .fernandoclass:nth-of-type(6) -->
fernando
</div>