代码之家 › 专栏 › 技术社区 › Robin Dijkhof

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

css-selectors css3 css

1

Robin Dijkhof · 技术社区 · 6 年前

我在第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>

垃圾是其他部门、类等。。。重要的是所有的垃圾都不一样。

我无法更改HTML,因为我正在为第三方web应用程序编写CSS。我可以为整个应用程序编写一些自定义CSS,而不仅仅是为一个页面。现在我想把“欢迎”作为目标(例如改变颜色)。我怎么能做到这一点而不影响“你好世界!”

旁白{ }

3 回复 | 直到 6 年前

1

2

Temani Afif 6 年前

您可以尝试使用 >

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>

2

0

Jithin Raj P R 6 年前

这对你有用:

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>

希望这对你有帮助。

3

0

Richard Parnaby-King 6 年前

aside 不更改,可以使用伪选择器 :first-of-type 只选择第一个 在一边 :

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>

在一边 .