11

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

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

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

引导 CSS 文件有

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

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

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

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

4

5 回答 5

18

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

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

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

/* older style in some library */
.foo .bar .baz {
    color: blue;
}

...in an overriding CSS file...

.foo .bar .baz {
    color: green;
}
于 2013-08-27T15:09:30.807 回答
5

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

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

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

http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

于 2013-08-27T15:07:07.450 回答
4

我建议尝试：

#topSurround a:hover {
  color: inherit;
}

至于如何覆盖 Bootstrap 正在添加的内容，我认为您的做法是最好的。

于 2013-08-27T15:10:59.953 回答
4

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

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

#topSurround a:hover {
    color: unset;
}

根据MDN网络文档：-

如果属性是从其父级继承的，则 unset CSS 关键字会将属性重置为其继承的值，如果不是，则重置为其继承的值initial value。换句话说，它的行为类似于inherit第一种情况下的initial关键字，也类似于第二种情况下的关键字。它可以应用于任何 CSS 属性，包括 CSS 速记 all。

于 2018-01-02T05:42:00.987 回答
1

每个 CSS 样式都有一个自然的默认值。并非总是如此none。

有些可能是0（如零）。

有些可能是auto。

有时inherit是最好的选择。

颜色可以设置为transparent。

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

于 2013-08-27T15:09:35.883 回答