hr breaks :nth-child() 选择器

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 被正确应用。我可能是错的，但由于我在 CSS 选择器中使用 class .promo-row，它应该只查看这些元素以声明它是否为奇数行。为什么 <hr> 被视为具有相同 class 的元素？

Answer 1

.promo-row:nth-child(odd) 并不意味着 "the odd .promo-row child elements," 它意味着 "the .promo-row elements that are also odd child elements." 这就像 .foo.bar 意味着同时具有 foo 和 bar 的元素类.

CSS 没有 "nth matching this selector." 的概念如果你的结构像你展示的那样规则，你仍然可以使用 nth-child 但允许 hr使用 :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>

Answer 2

这是因为 odd 的计数被 <hr>（或另一个块）的存在打破了。它适用于其他 .promo-row.

之后的所有 .promo-row

考虑以下示例：

<div class="row promo-row">.. other contents ..</div>
<div class="row promo-row">.. other contents ..</div>
<div class="row promo-row">.. other contents ..</div>
<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>

css 将仅适用于第三个 .promo-row，而不适用于最后一个，因为它们之间有一个 <hr> 块（它重新开始计数）

Answer 3

来自MDN's nth-child()：

The :nth-child(an+b) CSS pseudo-class matches an element that has an+b-1 siblings before it in the document tree, for a given positive or zero value for n, and has a parent element.

由于 <hr/> 是您 promo 的兄弟姐妹，因此他们也被那个伪 class 计算在内。

Answer 4

nth-child 计算所有 child 而不仅仅是 child 有 .promo-row class，你应该尝试

.promo-row:nth-child(4n)

它 select 每四个 child 一个 child （所以一个周期有 2 .promo-row 和 2 小时）并且它从第一个 child

hr breaks :nth-child() 选择器

hr breaks :nth-child() selector

html

css

css-selectors