如何使用 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 的标签）添加一些特定的 css 属性。使用css可以吗？如果不是，如何使用 javascript 做到这一点？

请注意，内部跨度标签内可能还有其他 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 的标签）添加一些特定的 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

您可以使用属性包含某些单词的选择器：Link

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

Answer 3

你可以试试

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

Answer 4

对于所有具有动态 ID 的跨度标签：

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

对于具有动态 ID 的特定跨度标签。 k 从 1..n

.main > span:nth-child(k)