小时的休息时间：nth-child（）选择器

必须有一个简单的解释。但在我看来，它应该以满意的方式工作。小时的休息时间：nth-child（）选择器

我们正在使用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>被视为具有相同类别的元素？

来源

2015-02-09 Brainfeeder

应该可以使用填充，边距和边框来复制div的样式并复制hr的效果，因此您可以免去这些中断，如果帮助。 – lharby 2015-02-09 09:47:18

在这种情况下，我想保留hr标签:) – Brainfeeder 2015-02-09 09:54:42

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

CSS没有“第n个匹配这个选择器”的概念。如果你的结构是为你展示的规律的，你仍然可以通过使用:nth-child(4n+1)使用nth-child但考虑到hr元素：

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

来源

2015-02-09 09:41:39

'：nth-child（4n + 1）'制定出完美。并感谢您的解释。我永远不会忘记：D奇怪，这是我第一次碰到这个，但... – Brainfeeder 2015-02-09 09:58:32

这是因为奇的COUN是由存在破<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>

，因为他们之间有一个<hr>块的CSS将只适用于第三.promo-row，别到最后一个（它重新开始计数）

来源

2015-02-09 09:43:59 Med

从MDN's nth-child()：