如何使父级属性不覆盖后代

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已经被父母包裹了，Hello也将变成红色。

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

我猜这是由于.parent-class h1现在有两个规则而.text只有一个规则而发生的。如果是这样，有没有办法减轻这个问题？

我可以做的一件事就是将父对象包裹在孩子周围，例如.parent-class .text，但是我在网上找到的css文件包含将近25,000行代码，而全局规则只有大约300行，因此这将非常耗时，因为我需要更改成千上万的课程。

还有另一种方法可以解决此问题？如果没有，有没有办法像这样将父规则包装在多个代码块中

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

还是不可能？