0

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

我对提供的 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>
4

1 回答 1

1

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

要覆盖 CSS，需要记住一些事项。

  1. CSS 特异性很重要。如果父类应用于 anid并且您正在使用 aclass覆盖，则id样式将获胜。

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

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

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

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

个人属性重置

.element {
   color: initial;
   border: initial;
   // your new styles below
}
于 2019-07-15T15:36:42.223 回答