Question

我正在处理的页面上附有许多不同的CSS文件，一个boostrap.css，一个master.css和一个custom.css文件。

我正在尝试删除属性，因为我不希望在菜单中的链接上有a：hover属性。主CSS文件有

#topSurround a:hover {
    color: #ffffff;
}

bootstrap CSS文件有

.nav > li > a:hover {
    text-decoration: none;
    background-color: #eee;
}

我不想编辑这些文件，因为它们是我正在使用的模板的核心文件，可以更新，因此我使用的是自定义CSS文件。通常，我会将该属性设置为default以覆盖该属性的任何先前使用。

#topSurround a:hover {
    color: none; (doesn't work, as this isn't the correct default)
}

所以，有两个问题：颜色属性的默认值是什么（似乎没有一个）？有没有更简单的方法来解决这个问题而不必覆盖核心文件？

Answer 1

您可以使用color: inherit让颜色使用其祖先的值。 color很奇怪，因为它具有不同的默认值，具体取决于上下文。例如，链接通常默认为蓝色，而文本默认为黑色。

如果您需要覆盖现有的样式，不要使用更具体的选择器。提升specificity意味着您下次要覆盖它时只需使用更多选择器。

相反，通过使用具有相同特异性的选择器来利用级联，并在原始样式之后使覆盖发生：

/* older style in some library */ .foo .bar .baz { color: blue; } ...in an overriding CSS file... .foo .bar .baz { color: green; }

Answer 2

最好的方法是制作更具体的 CSS规则，例如：

body #topSurround a:hover {
    color: transparent;
}

特异性是一个重要的CSS概念，如本文所述：

Answer 3

我建议尝试：

#topSurround a:hover {
  color: inherit;
}

至于如何覆盖Bootstrap添加的内容，我认为你最好这样做。

Answer 4

每种CSS样式都有一个自然的默认值。它并不总是none。

有些可能是0（如零）。

有些可能是auto。

有时inherit是最佳选择。

颜色可以设置为transparent。

如果您不确定默认值是什么，请尝试使用简单的无样式元素创建虚拟页面，并使用浏览器开发工具查看样式的设置。

Answer 5

要取消该属性，您可以使用 unset 关键字。

因此，在自定义css文件中，您可以执行以下操作： -

#topSurround a:hover {
    color: unset;
}

根据MDN网络文档： -

如果未绑定的CSS关键字从其父级继承，则将该属性重置为其继承的值，否则重置为initial value。换句话说，它的行为类似于第一种情况下的inherit关键字，就像第二种情况下的initial关键字一样。它可以应用于任何CSS属性，包括CSS简写全部。