访问网站时如何强制我的 css 样式？

Question

想象一下，我想webmaster.stackexchange.com每天访问（或其他网站），但我想更改标题的蓝色（例如将其更改为红色）。

访问网站时是否可以强制使用个人 css 样式？如果是这样，我该怎么做？也许是网络浏览器提示或插件？（我使用铬）

我想要一个自动解决方案，使用 Web 浏览器控制台（Chrome 上的 F12）为我访问的每个页面更改 css 并不有趣。

Answer 1

您所追求的一般概念是“用户样式表”。
Stylish ( Chrome / Firefox ) 为您提供了一种简单的方法来管理每个站点的样式并根据需要打开/关闭它们。

2021 年的警告：在 Stylish 实施了一些有问题的隐私政策后，如今大多数用户都在使用 Stylus（Stylish 的社区分支）。https://en.wikipedia.org/wiki/Stylish (13认同)
@Zistoloen 您是否已启用扩展程序以在隐私浏览中工作？隐私浏览（隐身）默认禁用扩展，但可以启用它们在那里工作（风险自负）。 (2认同)

Answer 2

自 2018 年起，Chrome (65) 浏览器的集成 DevTools 具有一项名为Local Overrides 的功能。因此，不需要像 StyleBot、Stylish 或 Greasemonkey 这样的附加组件或扩展。

本地覆盖允许在任何实时站点上重写 CSS、JS 和 DOM。更改保存在本地文件夹中，并覆盖实时环境的内容。

这可以在下面访问Developer Tools > Sources >> Overrides

这允许您选择一个自定义本地文件夹，其中包含 CSS 和 JS，并将覆盖当前网站自己的 CSS 和 JS。

感谢你的回答。但这是一个悲剧性的特征。您必须直接在源面板文件中编辑 CSS。如果 CSS 很混乱，即全部在一行或混淆，则可能无法进行更改。此外，它将整个 CSS 文件保存在您的本地目录中，因此如果它在网站上发生更改，您也会覆盖所有其他内容。任何感兴趣的人，这里是文档：https://developer.chrome.com/blog/new-in-devtools-65/#overrides (4认同)
看来自定义的 CSS 仅在 devtools 面板打开时才生效。有没有办法让它在不打开面板的情况下工作？ (3认同)
我花了一分钟才弄清楚它是如何工作的，但是......它有效！没有插件。伟大的！...特别是当您在某种安全环境中工作或者您的公司可能控制您可以安装的内容时 - 这在任何地方都适用。 (2认同)

Answer 3

2017 年，Stylish 变得非常沉重并且充满了臃肿的特性，所以我决定放弃它。

我创建了一个替代 - Styler 扩展 - 它是轻量级的，风格简约但功能强大。您可以添加自定义 CSS 和 JavaScript/jQuery 代码。

为什么我喜欢它并每天使用它 - 主要是因为所有 Google Chrome 浏览器（在 Mac、Win 和 Linux 上）之间自动保存和自动同步。

它说它是开源的。我找不到链接。[simov/styler](https://github.com/simov/styler) 是 GitHub 上的正确存储库吗？ (3认同)