如何使用css仅定位div内的特定<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 的标签）的所有第 1 次出现添加一些特定的 css 属性。这可以使用css吗？如果不是如何使用javascript来做到这一点？

请注意，内部跨度标签内可能还有其他 id。只想定位<span id="j_id0:j_id42">, <span id="j_id0:j_id4">, <span id="j_id0:j_id61">。这只是主 div 中跨度的第一次出现。

Answer 1

最简单的一种是使用>：

.main > span{}

想要使用动态 ID 定位所有 span 标签

如果我们考虑它，那么您可以将其更改为：

.main span[id]{}

我想向主 div 中每个 span 标签（带有 id 的标签）的所有第一个出现添加一些特定的 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{}

.main span[id]{}