1

我有以下代码，我想选择一个特定的class=title使用nth-child，但它似乎确实有效

<div class="block">
   <div class="title"></div> <!-- first title here !-->
   <div class="item"></div>
   <div class="item"></div>
   <div class="item"></div>
   <div class="title"></div> <!-- second title here !-->
   <div class="item"></div>
   <div class="title"></div> <!-- third title here !-->
   <div class="item"></div> 
   <div class="item"></div>
   <div class="item"></div>
</div>

测试 1 

.title:nth-child(3){
   background-color: red;
 }

预期结果Third title highlighted，但实际输出是no highlight is done

测试 2

.title:nth-child(1){
   background-color: red;
 }

预期结果First title highlighted实际输出为first title is highlighted

不知道为什么它不适用于另一个孩子，而它只适用于第一个孩子..

4

11 回答 11

3

如果您真的想选择具有类名的第三个孩子，那么您必须知道孩子的索引位置。在这种情况下，它是七而不是三。因此，您需要执行以下操作：div.block.title

 .title:nth-child(7){
     background-color: red;
 }

工作小提琴

简而言之，title在 中的位置没有具有班级3的孩子div.block。

更新：

在不知道它是否存在于指定位置或不使用 CSS 的情况下选择子元素是不可能的。但可以使用jQuery.

$('.title:eq(2)')  //This will search for the third child with the class .title
于 2013-03-05T06:42:57.083 回答
1

计算所有子元素，无论它们是什么，并且仅当:nth-child(n),指定的元素与附加到伪类的选择器匹配时才被选中。

仅计算附加到:eq(n)伪类的选择器，不限于任何其他元素的子元素，并且选择(n+1)第一个（n 是从 0 开始的）。

所以$('.block .title:eq(2)').css('background-color','Red');有效。

于 2013-03-05T06:43:23.023 回答
1

选择器.title:nth-child(3)并不意味着“具有该title属性的元素中的第三个”。相反，它匹配具有该title属性并且是其父元素的第三个子元素的元素。

CSS 中没有“同类中的第 n 个”选择器。您可以考虑使用 JavaScript 解决方法。但是使用类名 liketitle表明元素应该真正标记为某种级别的标题，例如，h2而不是div. 这样做，您可以删除 class 属性并使用选择器，例如h2:nth-of-type(3).

于 2013-03-05T06:43:26.313 回答
1

只有当您具有这样的结构时，您的测试 1才会起作用：

<div class="title"></div>
<div class="title"></div>
<div class="title"></div>

.title:nth-child(3){
  background-color: red;
}
于 2013-03-05T06:46:38.497 回答
1

用这个$('.title').siblings(':eq(3)').css('background-color', 'red');

演示：http: //jsfiddle.net/8JC7F/

甚至更好

$('.title').siblings('.title:eq(0)').css('background-color', 'red');

另外，如果您想知道为什么您的选择器不起作用，我引用 w3school

:nth-child(n) 选择器匹配其父元素的第 n 个子元素，无论其类型如何。

n 可以是数字、关键字或公式。

所以在你的情况下

.title:nth-child(5){
    background-color: red;
}

这将完美地工作

于 2013-03-05T07:01:11.517 回答
1

使用 class="title" 突出显示第一个 div：

    $('div.title:eq(0)').css('background-color','red');

使用 class="title" 突出显示第二个 div：

    $('div.title:eq(1)').css('background-color','red');

使用 class="title" 突出显示第三个 div：

    $('div.title:eq(2)').css('background-color','red');
于 2013-03-05T07:03:32.393 回答
0

您可以使用.eq()jQuery 方法。

$('.block div.title:eq(0)').css('background-color','red');
于 2013-03-05T06:36:32.560 回答
0

您可以:eq(index)为此使用选择器

$('.block .title:eq(2)').css('background-color','Red');

演示

于 2013-03-05T06:39:50.780 回答
0

.title:nth-child(3)意味着element with class 'title' which is the third child of it's parent。不是which is the third element with that class。

实际上，您不能the third element with that class使用纯 CSS 进行选择。

您可以使用jQuery带有以下选择器的脚本：

$('.title:eq(2)')
于 2013-03-05T06:40:56.780 回答
0

这真有趣。似乎那里有一个序列n + 1。从 1 开始，它将选择所有后续类。干得好。

.block .title:nth-child(n+1){
  background-color:red;
}
<div class="block">
   <div class="title">1</div> <!-- first title here !-->
   <div class="item">2</div>
   <div class="item">3</div>
   <div class="item">4</div>
   <div class="title">5</div> <!-- second title here !-->
   <div class="item">6</div>
   <div class="title">7</div> <!-- third title here !-->
   <div class="item">8</div> 
   <div class="item">9</div>
</div>

于 2020-10-29T11:10:45.647 回答
-1

采用

.title:first-of-type{
    color:#478547;

}

和

:nth-of-type()

选择标题类

于 2013-03-05T06:42:00.070 回答