我可以为我不拥有的网站设置CSS规则吗？

Question

考虑以下情况：我每天使用一个网站服务，但我不喜欢菜单的背景颜色。如果我检查元素，会发现菜单CSS类名为“my-menu”，在开发者工具中可以更改背景颜色，但很明显，当我刷新页面时，我的更改将丢失。有没有办法定义从现在开始无论何时浏览此网站，“my-menu”类都将包含我的更改? 有没有办法使用未在加载页面中定义的CSS规则并赋予它们最高优先级？

- Itay Gal

Answer 1

你可以使用类似于 Stylish 的浏览器扩展程序，并为其创建自定义样式表（称为用户样式）。 Firefox 上的 Stylish Chrome 上的 Stylish 你可以在 此 网站上找到已经创建好的用户样式、有关创建自己的样式以及更多文档资料。 安装和使用 Stylish 创建自己的用户样式 用户样式帮助

- Adonis K. Kakoulidis

---

这适用于任何网站吗？您可以更改哪些CSS样式？您可以更改div的宽度或任何HTML元素的显示属性吗？ - react_or_angluar

是的，你可以自行决定要覆盖哪些元素和属性。你只需要具备更高的特异性，以便让它们优先于网站本身的样式。它基本上会在网站的HTML中注入一个带有你的样式的样式表（当然，只针对你的系统，其他人看不到这些更改）。 - Adonis K. Kakoulidis

Answer 2

您可以使用像Stylish和GreaseMonkey这样的扩展，但这只适用于您的浏览器。

使用GreaseMonkey插件，有一个很好的维基页面，它解释了如何安装脚本（JavaScript）并自定义网页：http://wiki.greasespot.net/Greasemonkey_Manual:Installing_Scripts。但是，您只能处理JavaScript。

另一方面，Stylish允许您覆盖CSS（这可能是您首选的）。
以下是一个Stylish配置文件的示例：

@-moz-document domain(stackoverflow.com) {
    body {
        background-color: black !important; // switch to a dark theme for SO
    }
}

Stylish也可在Chrome上使用。

- Maxime Lorant

---

FYI，Greasemonkey 是用于 JavaScript 而不是 CSS 的。 - Adonis K. Kakoulidis

Answer 3

您可以在Chrome中无需额外插件，大多数情况下Firefox也是如此。

基本上，这是CSS的自然特性，称为用户代理样式表。

对于 Chrome：

1. 转到URL about:version并记录“配置文件路径”。
2. 在文件浏览器中浏览到配置文件路径。在您的个人资料文件夹内，打开“用户样式表”文件夹。在“用户样式表”内，应该有一个名为Custom.css的文件，默认为空。
3. 只需在Custom.css中添加您的样式。

对于Firefox：

有两个文件

1. resource://gre-resources/html.css
2. resource://gre-resources/quirk.css

您可以在Firefox安装文件夹中的omni.ja存档中找到它们。

omni.jar/chrome/toolkit/res

对于Firefox的替代方法:

1. 打开开发者工具
2. 进入样式编辑器
3. 点击 导入 按钮并导入你的样式表

- vittore

Answer 4

当然，最简单的方法是为Chrome创建一个Chrome扩展程序，或者如果您使用的是FireFox，则可以使用"Grease Monkey"。

另一种更复杂的方法是设置代理，将CSS文件替换为您的自定义文件。如果您使用的是Windows，则建议使用Fiddler，如果是OSX，则使用Charles。

- Nadav Leshem

Answer 5

你可以使用 Chrome 的开发工具，在“Sources”选项卡上编辑你的 CSS。
在那里，你可以编辑你的代码，复制并粘贴到你的 CSS 中。通过在样式上双击，你也可以在开发工具的右侧进行相同的操作。(:

---

我使用Notepad++ :o

早上好^^

- CaptainKnee