CSS 背景颜色未一致地应用于已访问的链接。 GM_addStyle 添加的 CSS

标签 css firefox css-selectors greasemonkey

我注意到 GM_addStyle() 添加的 CSS 有一些奇怪的行为。我有以下用户脚本:

// ==UserScript==
// @name        Reddit
// @namespace   http://example.com
// @include     http://www.reddit.com/
// @grant       GM_addStyle
// @version     1
// ==/UserScript==

GM_addStyle("a:visited { background-color: yellow !important; }");

现在,我希望该行为适用于所有链接或不适用任何链接(由于安全补丁),但我得到的是不一致的行为,因为它适用于某些链接,但不适用于其他链接。

Works for hot/top/wiki, but not any other links

谁能为我解释一下上述行为?

最佳答案

来自 Privacy and the :visited selector at MDN :

Only the following properties can be applied to visited links:

  • color
  • background-color
  • border-color (and its sub-properties)
  • outline-color
  • The color parts of the fill and stroke properties

In addition, even for the properties you can set for visited links, you won't be able to change the transparency between unvisited and visited links, as you otherwise would be able to using rgba() or hsla() color values or the transparent keyword.

显然,这意味着,在 Firefox 中,为了让您更改背景颜色,链接必须首先具有背景(您不能使用 :visited 添加背景 选择器)。因此,在尝试设置已访问链接的背景颜色样式之前设置背景。

这对我有用:

// ==UserScript==
// @name        _Reddit, style visited links
// @include     http://www.reddit.com/*
// @grant       GM_addStyle
// @version     1
// ==/UserScript==

GM_addStyle (
      /* For precision, only prime the desired links, that don't
        otherwise have a BG.
      */
      "a.title { background: white; }"
    + "a:visited { background-color: yellow !important; }"
);


请注意,我只是“启动”了我明确感兴趣的链接,这些链接还没有背景。因此 a.title {... 而不是 a {...


另请注意,对于仅更改样式,Stylish通常是更好的选择(性能和易于设置)。

关于CSS 背景颜色未一致地应用于已访问的链接。 GM_addStyle 添加的 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17764376/

相关文章:

javascript - 如果我异步加载图像,Firefox 选项卡加载微调器将永远运行

java - setPreference for FirefoxProfile 但无法关闭“保存”对话框

javascript - 在没有 jquery 的情况下获取第一个 <li>

css - 我该如何使用:has() selector to add animation to preview sibling when hovering over a specific element?

html - 2列div布局,右列固定宽度,始终居中

css - 将 html 中的 Ruby block 添加到输入类 - Twitter Bootstrap

javascript - 有没有办法使用 Vanilla JavaScript 从一个部分跳转到另一个部分?

python - 使用带有自定义 firefox 配置文件的 Selenium webdriver - 如何摆脱插件弹出窗口

html - 当完全相同的代码没有将它们向下移动到其他地方时,列出的图像正在向下移动

javascript - 使用 Javascript/D3JS/JQuery 永久更改 CSS 属性