Question

我试图用Stylish覆盖网站的背景，但它无效。该网站的背景css也有一个！重要的，它超越了时尚。

我的代码：

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

Answer 1

您需要更具体（quick guide to CSS specificity），例如，使用>选择器：

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

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

JSBin

Answer 2

首先，我建议你不要经常使用！重要的是，尽量避免使用它。

如果你有一个元素，你可以更好地定义这个元素的CSS路径，所以这会覆盖它。例如：

.elem { 
    color: black!important; 
}

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

Answer 3

特异性如何起作用的官方文件is here。在数量很大的基础上，特异性只是(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，html > body为002，body:not(#foobar)为101。

如何覆盖已经拥有的CSS背景！重要吗？

3 个答案: