VuePress

Question

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

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

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

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

我已经尝试 'ejecting' 将核心 CSS 放入我的项目文件中，并使用类似以下内容修改手写笔文件：

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

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

我希望有一些内置的 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。大多数提供样式的 Vue plug-ins（通常是 javascript 库）不会让您轻松完成。

要覆盖 CSS，有几点需要牢记。

CSS Specificity 很重要。如果父级 class 应用于 id 并且您使用 class 进行覆盖，则 id 样式将获胜。
订单很重要。确保你的 CSS 在 VuePress CSS.
有时重新设置和重新开始更容易。您可以使用 initial 关键字来做到这一点。

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

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

个人属性重置

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

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

VuePress - Ignore Core Styles Within a Specific Section of Page

css