如何<span>使用CSS</span>僅<span>將div中的</span>特定<span>標簽</span>作為目標<span>？</span>

Question

我只想將div中的第一級標簽作為目標。 這是我的代碼：

<div class="main">
 <span id="j_id0:j_id42">
    <span>Customer Info</span>
 </span>
 <span id="j_id0:j_id4">
    <span>Billing Address</span>
    <div>Text</div>
 </span>
 <span id="j_id0:j_id61">
    <span id="j_id4:22df">Shipping Address</span>
    <div>Text</div>
 </span>

想要使用動態ID而不是內部span標簽定位所有span標簽。 那就是我想在主div內每個span標簽（帶有id的一個）的所有第一次出現的地方添加一些特定的CSS屬性。 使用CSS可以嗎？ 如果不是，該如何使用javascript做到這一點？

請注意，內部span標簽內可能還有其他id。 只想定位<span id="j_id0:j_id42"> ， <span id="j_id0:j_id4"> ， <span id="j_id0:j_id61"> 。 那只是main div中span的第一次出現。

Answer 1

最簡單的一種是使用> ：

.main > span{}

想要使用動態ID定位所有span標簽

如果我們考慮過，則可以將其更改為：

.main span[id]{}

我想在主div內的每個span標簽（帶有id的一個）的所有第1次出現中添加一些特定的CSS屬性

然后，您可以使用它：

.main span[id]:first-child{}

最后修改：

只想定位<span id="j_id0:j_id42"> ， <span id="j_id0:j_id4"> ， <span id="j_id0:j_id61"> 。

.main span[id] span{}

 .main span[id] span{color:red; font-weight:bold;} 

 <div class="main"> <span id="j_id0:j_id42"> <span>Customer Info</span> </span> <span id="j_id0:j_id4"> <span>Billing Address</span> <div>Text</div> </span> <span id="j_id0:j_id61"> <span id-"id21">Shipping Address</span> <div>Text</div> </span> </div> 

Answer 2

您可以將選擇器與包含某些單詞的屬性一起使用： 鏈接

.main span[id~="j_id"] { ... }

Answer 3

您可以嘗試.main span[id^="j_id"] { ... }

Answer 4

對於具有動態ID的所有span標簽：

.main > span or span[id^="j_id0:j_"]

對於具有動態ID的特定范圍標簽。 來自1..n的k

.main > span:nth-child(k)