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选择器中使用了类.promo-row，所以它应该只查看这些元素来声明它是否是奇数行。为什么<hr>被视为具有相同类别的元素？

Answer 1

.promo-row:nth-child(odd)并不意味着＆＃34;奇怪的.promo-row子元素，＆＃34;它表示＆＃34; 也是奇数子元素的.promo-row元素。＆＃34;这就像.foo.bar表示同时包含foo和bar类的元素。

CSS没有＆＃34; n匹配此选择器的概念。＆＃34;如果您的结构与您展示的一样规则，您仍然可以使用nth-child，但可以使用hr允许:nth-child(4n+1)元素：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

这是因为<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()：

：nth-child（an + b）CSS伪类匹配具有的元素对于给定的积极因素，在文档树中它前面有一个+ b-1个兄弟姐妹或n为零值，并具有父元素。

由于<hr/>是您promo的兄弟姐妹，因此它们也会被该伪类计算。

Answer 4

n-child计算所有孩子，而不仅仅是那个有.promo-row课程的孩子，你会尝试类似

的孩子

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

它每四个孩子选择一个孩子（所以一个周期有2个.promo-row和2个小时），它从第一个孩子开始

hr break：nth-child（）选择器

4 个答案:

hr break：nth-​​child（）选择器

4 个答案:

hr break：nth-child（）选择器