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

Question

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

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

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

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

我已经尝试将核心 CSS“弹出”到我的元素文件中，并使用类似以下内容修改手写笔文件:

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

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

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

我的 Markdown 模板示例:

# 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. 订单很重要。确保您的 CSS 在 VuePress CSS 之后应用。

3. 有时候，重新开始并重新开始会更容易。你可以用 initial 做到这一点关键字。

Scorched earth 重置(这甚至会删除浏览器级别的内容，例如 block 与内联，所以要小心)

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

个人属性(property)重置

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