CSS - 选择标签的子级，直到下一个相同类型的标签[重复]答案

【问题标题】：CSS - select children of a tag until next tag of same type [duplicate]CSS - 选择标签的子级，直到下一个相同类型的标签[重复]
【发布时间】：2019-03-27 18:02:59
【问题描述】：

我有以下 DOM：

<div class="someclass">
  <p>
    <p>
      <span></span>
    </p>
  </p>
  <div>
    <p>
      <span></span>
    </p>
  </div>
</div>

我需要将样式表应用于具有someclass 类的div 下的span 标记，但不适用于嵌套div 下的span 标记。

其中可能存在任何其他标签层次结构，span 标签可能嵌套在任何标签之间（div 除外）。使用 > 也无济于事。

你能给我一个选择器来选择它们吗？

【问题讨论】：

在哪里发布已经关闭的答案
把你的想法发表评论
我认为我的最新更新为您解决了这个问题。
.someclass p + p span { color:#000; } .someclass div span { color:#f00; }
添加了另一个重复项，您唯一的解决方案是考虑两个选择器。还要注意p里面的p是无效的

标签： html css css-selectors

【解决方案1】：

您可以使用直属子> 来完成此操作。您还可以使用 * 选择器和否定来完成非 div 嵌套查找。

.someclass > p,
.someclass *:not(div) p {
  background-color: yellow;
}

<div class="someclass">

  <p>Highlight me</p>
  <section><p>Also hightlight me</section>
  <section>
    <section>
      <p>Also hightlight me
    </section>  
  </section>      
  <div>
    <p>Do not highlight me</p>
  </div>
</div>

【讨论】：

这不是我的情况...... div 和 p 标签之间可能存在任何层次结构。 > 选择器适用于直接孩子，但我可以有以下

（标签名称只是说明性的）。
看起来不错，但不适用于这种情况：

aa

aa

（当不应该突出显示的元素嵌套在其他标签中时）
我可能做到了：.someclass span { background-color: yellow; } .someclass div span { 背景颜色：继承； }
但是如果不使用继承并且只使用黄色显然会更好。您的解决方案非常接近，但不包括嵌套跨度。