VuePress - 忽略页面特定部分中的核心样式

Question

我正在为我工​​作的网站建立一个文档网站。

我对提供的 VuePress 核心样式表很满意，但我希望能够从核心样式表中排除页面的特定部分。

例如，我想展示我网站的 CSS 如何呈现标签，我已将我的网站 CSS 包含在我的文档项目中，并且可以看到样式已应用，但 VuePress 核心样式也已应用，我希望它们被忽略。

我知道 style.styl 用于覆盖，但这并不能解决我的问题。

我尝试将核心 CSS '弹出'到我的项目文件中，并使用以下内容修改手写笔文件：

*:not(.my-custom-css-only-class)

但这会做一些奇怪的事情，比如影响侧边栏中的核心链接样式。

我希望有一些内置类我可以添加到我只想使用我的自定义 CSS 但我无法通过搜索找到这样的部分。

我的降价模板示例：

# Styles
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div class="my-custom-css-only-class">
<h1>Only apply my sites CSS to this element</h1>
</div>

Answer 1

我会尝试用您自己的 CSS 覆盖库 CSS。大多数提供样式的 Vue 插件（通常是 JavaScript 库）都不会让您轻松搞定。

要覆盖 CSS，需要牢记几件事。

1. CSS Specificity 很重要。如果父类应用于 id 并且您使用 class 进行覆盖，则 id 样式将胜出。

2. 订单很重要。确保在 VuePress CSS 之后应用您的 CSS。

3. 有时重置和重新开始更容易。您可以使用 initial 关键字来做到这一点。

焦土重置（这甚至会删除浏览器级别的内容，例如块与内联，所以要小心）

.element {
   all: initial;
   // your new styles below
}

个人财产重置

.element {
   color: initial;
   border: initial;
   // your new styles below
}