Question

第n个子选择器nth-child（4n）通常应该选择匹配的每第四个孩子。

我有一个与每个第三个孩子相匹配的例子，我不知道为什么。

你能帮我解决这个问题吗？

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

nth-child()伪类计算同一父母的所有子女。

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

它从第一个孩子开始计算，在您的代码中恰好是h1。

由于所有具有类line_4的元素也恰好是div，并且容器中没有其他div兄弟，请考虑使用nth-of-type()代替（revised demo）。

规范中的更多详细信息：https://www.w3.org/TR/css3-selectors/#selectors

Answer 2

根据小提琴，你在这里做的是：

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

您正在选择第4个div元素。现在你可能会问自己为什么。你写了

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

你要做的就是分开课程名称，如下所示：

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

现在您可以选择所选班级下的第4个孩子。

注意：你错过了解nth-child的观点，我建议你多练习一下。

Answer 3

nth-child()选择器将包含具有相同父级的所有子级，此外，它将包含第一个<h1>元素以及其他类，这会将事情抛出1。

如果您想将每个第4个元素与现有代码匹配，请考虑使用4n+1作为您的nth-child参数（从<h1>元素后面开始）：

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

示例

.line_4:nth-child(4n + 1){ 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 & 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 4

如果您仅在div元素上使用:nth-of-type()类，则可以使用line_4，因此它应该适用于您的示例DEMO

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

Answer 5

每@Michael_B's answer，:nth-child()伪选择器适用于父元素的所有子元素。但是，假设.mod_article模块的标记结构始终与您的示例一致，您可以尝试使用:nth-of-type选择器。

这两个选择器之间的关键区别：:nth-child()认为所有子项，:nth-of-type()只查看给定标记的子元素。因此，为了获得所需的结果，我将CSS（在链接的jsFiddle中）替换为以下内容：

.mod_article > div:nth-of-type(4n){
  background: #ff0000;
}

在您的标记中，最初的<h1>代码将计数丢弃一个，因此我们可以使用:nth-of-type()选择器通过仅定位div来纠正此问题。很抱歉，如果我的解释有点令人费解 - 但是请尝试使用jsFiddle中的:nth-of-type()选择器。你应该很快掌握它。

（有关the MDN docs :nth-of-type()选择器的更多详细信息。）

Answer 6

试试这个......希望它能起作用

.line_4:nth-child(4n-7) {  /* or 4n+1 */
   background: #ff0000;
}

请关注上课。如果我在那里我的代码将像

一样

li:nth-child(4n-7) {  /* or 4n+1 */
    color: green;   
}

或

.line:nth-child(4n-7) {  /* or 4n+1 */
       background: #ff0000;
  }

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

6 个答案: