Javascript 如何只针对特定的<；span>；使用css在div中添加标签？

我只想针对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。只想以

，

，

为目标。这只是主分区内跨度的第一次出现。

最简单的方法是使用

：

.main > span{}

要将所有具有动态ID的span标记作为目标吗

如果我们考虑它，那么你可以把它改成：

.main span[id]{}

我想在主div中第一次出现的每个span标记（带有id的）中添加一些特定的css属性

然后您可以使用它：

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

对于上次编辑： 只想以

，

，

为目标

.main span[id]span{颜色：红色；字体重量：粗体；}

客户信息
帐单地址
正文
送货地址
正文

您可以将选择器与包含某些单词的属性一起使用：

---

您可以尝试

.main span[id^=“j_id”]{…}

查找所有具有动态id的span标记：

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

用于具有动态ID的特定跨度标记。k从1..n开始

.main > span:nth-child(k)

---

.main>span{…}它只是一个简单的css选择器。main>span将选择.main中的所有子span标记。如果需要，可以使用.main>span>span来定位第二层跨距。感谢您的解决方案，但也有id以“j_id”开头的内部跨距标记。所以我们不能使用这个。那么

~=

搜索包含这个词的元素。在我的示例中，我使用'j_jd'，但您可以使用其他一些单词，如'0:j_id'

。main span[id~=“0:j_id”]{…}

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

.main > span:nth-child(k)