CSS选择每4个不工作的孩子

Question

第n个孩子选择器nth-child(4n)通常应该选择匹配的每第四个孩子.

我有一个匹配每个第三个孩子的例子,我不知道为什么.

你能帮帮我吗？

.line_4:nth-child(4n){
   background: #ff0000;
}

http://jsfiddle.net/YPRB9/33/

.line_4:nth-child(4n) {
  background: #ff0000;
}

<div class="mod_article first last block" id="article-591">
  <h1 class="ce_headline first"> Kategorieübersicht</h1>
  <div class="ce_text line_4 block">
    <h3>hydraulische Handpumpen</h3>
  </div>
  <div class="ce_text line_4 block">
    <h3>elektr.Hydraulikpumpen</h3>
  </div>
  <div class="ce_text line_4 block">
    <h3>Handhebelventile &amp; Steuerventile</h3>
  </div>
  <div class="ce_text line_4 block">
    <h3>Hydraulikschläuche</h3>
  </div>
  <div class="ce_text line_4 block">
    <h3>Hydraulikkupplungen</h3>
  </div>
  <div class="ce_text line_4 block">
    <h3>Hydraulikverschraubungen</h3>
  </div>
  <div class="ce_text line_4 block">
    <h3>Kardanringe und Lagerböcke</h3>
  </div>
  <div class="ce_text line_4 last block">
    <h3>Hydraulikventile</h3>
  </div>
</div>

Answer 1

该nth-child()伪类计算所有同父的孩子.

您似乎正在尝试计算包含该类的所有元素line_4.选择器不关心class.

它从第一个孩子开始计算,这个孩子恰好h1在你的代码中.

由于所有带类的元素line_4也恰好是div,并且容器中没有其他div兄弟,所以请考虑使用nth-of-type()(修改演示).

规范中的更多细节:https://www.w3.org/TR/css3-selectors/#selectors

Answer 2

根据小提琴/代码，您在这里所做的是这样的：

• 将红色背景应用于具有 class line_4 的元素（这很清楚），但前提是该元素是第四个子元素，这意味着父元素是<div class="mod_article first last block" id="article-591">，第一个子元素是 .

所以基本上，如果你想在不接触 CSS 的情况下实现你想要实现的目标，你应该将 h1 移到父 div 之外，或者如果你想不接触 HTML，那么正如 @Rion Williams 建议使用4n + 1 :)