CSS如何排除带.vp-raw类祖先的元素应用.vp-doc样式

给开源项目提交PR时碰到CSS样式隔离问题，对应HTML结构如下：

<div class="vp-doc">
  <p>styled</p>
  <div class="vp-raw">
    <p>not styled</p>    
    <div>
      <p>not styled</p>    
    </div>
  </div>
</div>

核心需求：

• 给所有位于.vp-doc容器内的p、h1等标签设置统一排版样式
• 只要元素的任意层级祖先带有.vp-raw类，就不对该元素应用上述统一样式
• p、h1这类目标元素可能存在很深的嵌套层级

• 嵌套:not()写法
  最初尝试嵌套伪类的写法完全不生效，代码如下：

.vp-doc {
  :not(.vp-raw) {
    h1 {
      color: red;
    }    
  }
}

注：p等目标元素可能存在更深层级的嵌套

• all: revert方案
  这个方案接近实现效果，但all: revert会一并移除元素上的其他自定义样式，不符合需求，测试代码如下：

p {
  font-weight: 600;
  color: green;
}

.vp-doc p {
  color: red;  
}

.vp-raw p {
  all: revert;
}

<div class="vp-doc">
  <p>styled</p>
  <div class="vp-raw">
    <p>not styled</p>
    <div>
      <p>not styled</p>
    </div>
  </div>
</div>

参与VitePress项目开发时，项目中vp-doc类会为Markdown渲染生成的内容（h1、p等标签）添加默认排版样式，但在文档中嵌入演示组件时，组件内部的h1、p等标签也会被这些默认样式干扰。目前规划的解决方案是新增.vp-raw类实现样式隔离：仅屏蔽.vp-doc注入的默认样式，保留组件自身添加的其他自定义样式，需要寻找可落地的CSS实现方案。

内容的提问来源于stack exchange，提问作者JD Solanki