html - 如何使父属性不覆盖后代

Question

我正在为我正在制作的网站使用我上网的 css 文件，但我只是将一些组件嵌入到网站中。这个 css 文件使用全局样式，它们覆盖了我网站上的所有全局样式。我想我只需包装全局样式并使它们成为一个类的后代，然后将其作为我的组件的父类。这是我所说的一个例子

h1 {
  color: red;
}

.text {
  color: blue;
}

但现在我所有的 h1页面上的标签以红色结束。我决定包装所有全局样式并使其只有某个类的后代会受到该样式的影响。这是新的 CSS 的样子

.parent-class h1 {
  color: red;
}

.text {
  color: blue;
}

并使我的 html 看起来像这样

<h1>This should not be affected by any css</h1>
<div class="parent-class">
  <h1 class="text">Hello</h1>
  <h1>How's it going</h1>
</div>

第一部分确实有效。我的顶 h1不受之前的全局CSS影响。

但这是我遇到的问题。之前， text类覆盖了全局 h1风格，和我的 Hello最后变成蓝色，而我的 How's it going是红色的。现在 h1已被 parent 包裹， Hello也以红色收场。

我知道父样式首先出现在 css 文件中，所以我认为这不是先渲染什么的问题。另外，我知道一切都在使用类，而不是 ID，因此也不会发生优先级问题。

我猜这是因为 .parent-class h1现在有两条规则，而 .text只有一个。如果是这种情况，有没有办法缓解这个问题？

我可以做的一件事就是将 parent 包裹在 child 周围，例如 .parent-class .text ，但是我在网上找到的 css 文件有接近 25,000 行代码，而全局规则只有大约 300 行，所以这将非常耗时，因为我需要更改数千个类。

有没有其他方法可以解决这个问题？如果没有，有没有办法以这样的方式将父规则包装在多个代码块周围

.parent-class {
  .text {
    color:blue; 
  };
  h1 {
    color: red;
  };
}

或者那不可能？

Answer 1

通过将第二个选择器与其他选择器相结合，确保您的第二个选择器具有相同(或更高)的特异性。例如，您可以添加 nth-child(n)这不会改变选择器的行为，只会增加其特异性:

.parent-class h1 {
  color: red;
}

.text:nth-child(n) {
  color: blue;
}

<h1>This should not be affected by any css</h1>
<div class="parent-class">
  <h1 class="text">Hello</h1>
  <h1>How's it going</h1>
</div>

您还可以复制该类:

.parent-class h1 {
  color: red;
}

.text.text {
  color: blue;
}

<h1>This should not be affected by any css</h1>
<div class="parent-class">
  <h1 class="text">Hello</h1>
  <h1>How's it going</h1>
</div>