我有多個包含段落的重復 div 部分，我只想在 div 內的第一個匹配段落上應用特定的 CSS。
div.example1 p.special~p.special {
color: green;
}<p>Top Paragraph</p>
<div class='top'>
<div class="example1">
<p class="special">This is paragraph 1 and it should be green and bold</p>
</div>
<div class="example1">
<p class="special">This is paragraph 2</p>
</div>
<div class="example1">
<p class="special">This is paragraph 3</p>
</div>
</div>這是鏈接-
uj5u.com熱心網友回復：
問題 使用第二個 css 選擇器，您正在修改 ap 標記之后的所有 p 標記，這些標記位于具有 example1 類的 div 內
解決方案 不是針對第一個 p 標簽，而是通過執行以下操作來定位第一個 .example1 div：
.example1:first-of-type .special {
color: green;
font-weight: bold;
}<p>Top Paragraph</p>
<div class='top'>
<div class="example1">
<p class="special">This is paragraph 1 and it should be green and bold</p>
</div>
<div class="example1">
<p class="special">This is paragraph 2</p>
</div>
<div class="example1">
<p class="special">This is paragraph 3</p>
</div>
</div>旁注盡量保持你的 css 選擇器盡可能短，并切中要害。避免做類似的事情div.class，而是使用.class
uj5u.com熱心網友回復：
您可以使用:nth-child()偽類來指定兄弟姐妹組中的哪個元素。請參閱 :nth-child() 檔案
.example1:nth-child(1) .special {
color: green; font-weight:bold;
}
或者:first-of-type，將選擇組中的第一個元素。請參閱：第一類檔案
.example1:first-of-type .special {
color: green; font-weight:bold;
}
兩個選擇器都將為您的 HTML 片段實作相同的目標。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/330108.html