如何<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)