Question

我在第1页上获得了以下html

//Page 1:
<aside class="sidebar sidebar--medium">
    <junk>Welcome</junk>
</aside>

以及第2页中的以下内容：

//Page 2:
<aside class="sidebar sidebar--medium">
    <junk>
        <aside class="sidebar-light sidebar--medium"> //Whatever is in this should not change.
            <morejunk>Hello world!</morejunk>
        </aside>
    </junk>
</aside>

垃圾是其他div，班级等。重要的是所有垃圾都不相同。

我无法更改HTML，因为我正在为第三方Web应用程序编写一些CSS。我可以为整个应用程序编写一些自定义CSS，而不仅仅是为单个页面编写。现在，我要定位（例如更改颜色）“欢迎”。我该如何做到而又不影响“ Hello world！”

以下CSS更改了两个字符串的颜色，我不希望这样做。在旁边{ 颜色：黄色 }

Answer 1

您可以尝试使用>选择器，如下所示：

aside.sidebar > junk {
  color:red;
}

aside.sidebar > junk *,
aside.sidebar aside {
 color:initial;
}

<aside class="sidebar sidebar--medium">
    <junk>Welcome</junk>
</aside>
<aside class="sidebar sidebar--medium">
    <junk>
        <aside class="sidebar-light sidebar--medium">
            <morejunk>Hello world!</morejunk>
        </aside>
    </junk>
</aside>

Answer 2

这将为您工作：

aside > div{
  color:red;
}
aside > div div{
  color:blue;
}

<aside class="sidebar sidebar--medium">
    <div>Welcome</div>
</aside>
<aside class="sidebar sidebar--medium">
    <div>
        <aside class="sidebar-light sidebar--medium">
            <div>Hello world!</morejunk>
        </aside>
    </div>
</aside>

希望这对您有所帮助。

Answer 3

如果aside的数量没有变化，则可以使用伪选择器:first-of-type仅选择第一个aside：

aside:first-of-type>junk {
  color: red;
}

<aside class="sidebar sidebar--medium">
  <junk>Welcome</junk>
</aside>
<aside class="sidebar sidebar--medium">
  <junk>
    <aside class="sidebar-light sidebar--medium">
      <morejunk>Hello world!</morejunk>
    </aside>
  </junk>
</aside>

这样，您不必担心重置下一个aside的颜色。

CSS目标元素不包含相同的元素

3 个答案: