html - 小时休息 :nth-child() selector

Question

对此必须有一个简单的解释。但在我看来，它应该按预期工作。

我们正在使用 Bootstrap 3 CSS 框架。在一个页面上，我们有以下代码:

<div class="promoties-overzicht">
    <div class="row promo-row">.. other contents ..</div>
    <hr>
    <div class="row promo-row">.. other contents ..</div>
    <hr>
    <div class="row promo-row">.. other contents ..</div>
    <hr>
</div>

现在当我做 .promo-row:nth-child(odd)用灰色背景颜色设置奇数促销行的样式。它为每个促销行设计样式。当我删除 <hr>的 CSS 应用正确。我可能是错的，但因为我使用类 .promo-row在 CSS 选择器中，它应该只查看这些元素来声明它是否为奇数行。为什么 <hr>是否被视为具有相同类别的元素？

Answer 1

.promo-row:nth-child(odd) 并不表示“奇数 .promo-row 子元素”，它表示“。 promo-row 元素也是奇数子元素。”这就像 .foo.bar 表示同时具有 foo 和 bar 类的元素。

CSS 没有“第 n 个匹配这个选择器”的概念。如果您的结构与您显示的一样规则，您仍然可以使用 nth-child 但允许使用 :nth-child(4n+1 ):

.promoties-overzicht .promo-row:nth-child(4n+1) {
  background-color: yellow;
}

<div class="promoties-overzicht">
    <div class="row promo-row">.. other contents ..</div>
    <hr>
    <div class="row promo-row">.. other contents ..</div>
    <hr>
    <div class="row promo-row">.. other contents ..</div>
    <hr>
    <div class="row promo-row">.. other contents ..</div>
    <hr>
    <div class="row promo-row">.. other contents ..</div>
    <hr>
    <div class="row promo-row">.. other contents ..</div>
    <hr>
</div>