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覆盖。大多数提供样式的Vue插件（通常是javascript库）都不会给您带来方便。

要覆盖CSS，请注意以下几点。

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

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

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

重置个人财产

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

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

1 个答案: