Question

我有以下代码，我想使用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

我不确定为什么它不能与另一个孩子一起工作，而它只适用于第一个孩子..

Answer 1

如果您确实想要选择div.block的第三个孩子，并且班级名称为.title，那么您必须知道child index position。在这种情况下， SEVEN 不是 THREE 。所以，你需要做以下的事情：

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

<强> Working Fiddle

简而言之，title位置3上没有上课div.block的孩子。

<强>更新：

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

$('.title:eq(2)')  //This will search for the third child with the class .title

Answer 2

使用:nth-child(n),计算所有子项，无论它们是什么，只有在与附加到伪类的选择器匹配时才选择指定的元素。

使用:eq(n)时，只计算附加到伪类的选择器，不限于任何其他元素的子项，并且选择(n+1)个（n为0）。 / p>

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

Answer 3

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

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

Answer 4

只有当您拥有以下结构时，测试1 才有效：

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

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

Answer 5

使用此$('.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;
}

这将完美地运作

Answer 6

使用class =“title”突出显示第1个div：

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

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

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

使用class =“title”突出显示第3个div：

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

Answer 7

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

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

Answer 8

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

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

<强> DEMO

Answer 9

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

实际上，您无法使用纯CSS选择 the third element with that class 。

您可以使用jQuery脚本，使用以下选择器：

$('.title:eq(2)')

Answer 10

这很有趣。好像那里有一个序列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>

Answer 11

使用

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

}

和

:nth-of-type()

选择标题类

nth-child只选择第一个元素

11 个答案: