css - 如何覆盖已经具有！important 的 CSS 背景？

Question

我正在尝试用 Stylish 覆盖网站的背景，但它不起作用。网站的背景 css 也有一个 !important，它是压倒一切的 Stylish。

我的代码：

body {
  background-image: none !important; 
  background: black !important;
}

Answer 1

您需要更具体（CSS 特异性快速指南），例如，使用>选择器：

body {
  background-image: none !important; 
  background: black !important;
}

html > body {
  background-image: none !important; 
  background: red !important;
}

JSBin

Answer 2

首先，我建议您不要经常使用 !important，尽量避免使用它。

如果您有一个元素，您可以更好地定义该元素的 CSS 路径，以便覆盖它。例如：

.elem { 
    color: black!important; 
}

#list1 > .elem { 
    color: red!important; 
}

Answer 3

关于特异性如何工作的官方文档在这里。在大量碱基特异性是简单的(100 * ID rules) + (10 * class rules) + (1 * tag rules)。

如果您遇到一个非常令人讨厌的网站或希望使用非常广泛的规则，您可以使用它:not(#some_id_which_you_will_never_find)来人为地增加特异性。ID 规则具有最高值，因此您应该使用它们。

例如，我想确保网站中的每个 div 都没有被标记为visibility: hidden并使用它：

div:not(#oStHDi_0):not(#oStHDi_1):not(#oStHDi_2):not(#oStHDi_3):not(#oStHDi_4):not(#oStHDi_5) {
    visibility: inherit !important;
}

这具有 601 的特异性。

在您的情况下body，具有特异性 001、002html > body和body:not(#foobar)101。