Html hr中断：n-child（）选择器

对此必须有一个简单的解释。但在我看来，它应该像预期的那样起作用

我们正在使用Bootstrap3CSS框架。在页面上，我们有以下代码：

<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行：第n个子行（奇数）

时，用灰色背景色设置奇数promo行的样式。它为每一个促销行设置样式。当我删除

时，CSS被正确应用。 我可能错了，但是因为我在CSS选择器中使用了class

.promo行

，所以它应该只查看这些元素来声明它是否是奇数行。为什么

被视为具有相同类的元素？

.promo行：第n个子元素（奇数）

并不意味着“奇数

.promo行

子元素”，它意味着“也是奇数子元素的

.promo行

元素。”这就像

.foo.bar

表示既有

foo

又有

bar

类的元素

CSS没有“第n个匹配此选择器”的概念。如果您的结构像您所显示的那样规则，您仍然可以使用

n个子元素

，但通过使用

：n个子元素（4n+1）

，允许

hr

元素：

.promotions overzicht.promoto行：第n个子项（4n+1）{
背景颜色：黄色；
}

.. 其他内容。。

.. 其他内容。。

.. 其他内容。。

.. 其他内容。。

.. 其他内容。。

.. 其他内容。。

这是因为存在
（或另一个块）打破了奇数的界限。它适用于其他
.promo行
之后的所有
.promo行

考虑以下例子：

<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行，而不适用于最后一个，因为它们之间有
块（它将重新启动计数）
来自：

：nth子（an+b）CSS伪类与具有
对于给定的正值，在文档树中它前面有一个+b-1同级
或n的零值，并具有父元素

由于
是您的
promo
的兄弟姐妹，因此他们也被该伪类计算。
n子类计算所有子类，而不仅仅是拥有.promo行类的子类，您应该尝试以下操作

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

它每四个子元素选择一个子元素（因此一个周期包含2.promo行和2个hr），并从第一个子元素开始
应该可以使用填充、边距和边框设置div的样式并复制hr的效果，因此您可能可以省去中断，如果这有帮助的话。在本例中，我希望保留hr标记：）外围相关，尽管我没有对其进行编码，但我将“第n个子”样式应用于连续的
元素，提供交替的线宽（在Firefox中查看）。我将这种行为归结为分数的使用，例如
1.5px
<编码>0.2rem--非整数，例如
1px
--我的CSS样式表中定义的
的“高度”值。
：第n个子项（4n+1）
的计算结果非常完美。谢谢你的解释。我永远不会忘记：奇怪的是，这是我第一次遇到这个。。。