css針對特定的p標籤

Question

我之前問過類似的問題，但我找到了一個更好的方式來說出它。因此，考慮到有多個DIV ID的HTML文檔，裏面it..like數p標籤每個DIV ID，

<div id="testing"> 
    <h2>Hello</h2> 
    <p>this is number one</p> 
    <p> this is number two </p> 
</div> 
<div id="testingTwo"> 
    <h2>hello again! </h2> 
    <p> i just want this one </p> 

我怎麼會專門針對沒有影響ID「測試」的第二個p標籤第二個id'testingTwo'的第一個p標籤？

Answer 1

您可以使用nth-of-type選擇器來選擇第二個p元素。

通過在選擇器中使用#testing，您只針對位於#testing元素內的元素。所以，你不必擔心其他地方的元素。

#testing p:nth-of-type(2) { 
 
    color: green; 
 
    font-weight: bold; 
 
}

<div id="testing"> 
 
    <h2>Hello</h2> 
 
    <p>this is number one</p> 
 
    <p>this is number two</p> 
 
</div> 
 

 
<div id="testingTwo"> 
 
    <h2>hello again! </h2> 
 
    <p>i just want this one</p>

作爲替代方案，你也可以使用#testing :nth-child(3)選擇#testing元素中的第三子元素。然而，這不是一個可靠的方法，因爲標記可能會改變，這是行不通的。

#testing :nth-child(3) { 
 
    color: red; 
 
}

<div id="testing"> 
 
    <h2>Hello</h2> 
 
    <p>this is number one</p> 
 
    <p>this is number two</p> 
 
</div> 
 

 
<div id="testingTwo"> 
 
    <h2>hello again! </h2> 
 
    <p>i just want this one</p>

Answer 2

對於也許最簡單的方法，你可以給你想要一個新的ID或類分開設置p標籤。

<div id="testing"> 
    <h2>Hello</h2> 
    <p>this is number one</p> 
    <p id="mytarget"> this is number two </p> 
    </div> 

然後指定該ID。

Answer 3

嘗試

#testing :nth-child(3) { 
    //code 
} 

使用 '＃' 如果定位一個ID，和 ''如果一個類。

Answer 4

您可以使用nth-of-type(n) css屬性。這裏n是int值，從1 ... n開始。

解決你的問題：

#testing p:nth-of-type(1) { 
    font-size:18px; 
} 

Codepen演示：Demo

參考MDN Documentation瞭解更多信息

Answer 5

您可以通過調用DIV ID和第n個子內針對特定P標籤您要更改的p標籤，例如

 #testing :nth-child(3) { 
     color: red; 
    } 

會在測試中調用第三個p-tag。