2016-11-18 60 views
-4

像例如: 假设我想给第二段的颜色。如何选择第二段?

<div class="intro"> 
    <p>My name is Donald</p> 
    <p>I live in Duckburg</p> 
    <p>I have many friends:</p> 
</div> 

我该如何只选择CSS和jQuery中的第二段,因为没有名称或ID分配两个它们。

+4

在CSS中使用':第n个孩子(2)',jQuery中使用'eq(1)' –

+0

演示:https://jsfiddle.net/szq7onru/ – Li357

+1

@Rory - '.intro p:第n类型(2)',_not_'.intro p:n-child(2 )'(!)否则后续的文档修改(例如,在第一段和第二段之间插入'img')将意味着该样式不再起作用,因为第二个孩子将不再是'p'。 – Rounin

回答

2

你可以试试这个:

$(".intro p:nth-child(2)"); 
// OR 
$(".intro p:eq(2)"); 

见代码块如下:

$(".intro p:nth-child(2)").css("background-color", "red"); 
 
// OR 
 
// $(".intro p:eq(1)");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="intro"> 
 
    <p>My name is Donald</p> 
 
    <p>I live in Duckburg</p> 
 
    <p>I have many friends:</p> 
 
</div>

希望这有助于!

+1

eq()从0开始,所以在eq(2)中,您实际上选择了第三个子女 –

+0

您说得对,我已经更新了答案... –

0

该代码会为CSS工作:

.intro p:nth-of-type(2) { 
    color: blue; 
} 

它会只挑第二段,并添加蓝色,以它

相关问题