2016-11-18 88 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; 
} 

它會只挑第二段,並添加藍色,以它

相關問題