如何取消 CSS 属性？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18469164/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How Do I Cancel Out A CSS Property?
提问by ClaytonDaniels
The page I am working on has many different CSS files attached to it, a boostrap.css, the master.css and a custom.css file.
我正在处理的页面附加了许多不同的 CSS 文件，boostrap.css、master.css 和 custom.css 文件。
I'm trying to remove a property, as I don't want there to be a a:hover property on the link in a menu. The master CSS file has
我正在尝试删除一个属性，因为我不希望菜单中的链接上有 aa:hover 属性。主 CSS 文件有
#topSurround a:hover {
color: #ffffff;
}
The bootstrap CSS file has
引导 CSS 文件具有
.nav > li > a:hover {
text-decoration: none;
background-color: #eee;
}
I don't want to edit these files, as they are core files with the template I am using and could be updated, so I am using a custom CSS file. Normally, I would set the property to default to override any previous uses of the property.
我不想编辑这些文件，因为它们是我正在使用的模板的核心文件并且可以更新，所以我使用的是自定义 CSS 文件。通常，我会将属性设置为默认值以覆盖该属性的任何先前使用。
#topSurround a:hover {
color: none; (doesn't work, as this isn't the correct default)
}
So, two questions: What is the default value for the color property (there doesn't seem to be one)? Is there an easier way to go about this without having to overwrite the core files?
那么，有两个问题： color 属性的默认值是多少（似乎没有）？有没有更简单的方法来解决这个问题而不必覆盖核心文件？
回答by zzzzBov
You can use color: inheritto have the color use the value from its ancestors. coloris odd in that it has different default values depending on context. A link, for example, will typically default to blue, while text will default to black.
您可以color: inherit让颜色使用其祖先的值。color很奇怪，因为它根据上下文具有不同的默认值。例如，链接通常默认为蓝色，而文本默认为黑色。
If you need to override the existing style, don't use a more specific selector. Raising the specificitymeans that you'll just have to use more selectors the next time you want to override it.
如果您需要覆盖现有样式，请不要使用更具体的选择器。提高特异性意味着您下次想要覆盖它时只需要使用更多选择器。
Instead, take advantage of the cascade by using a selector with identical specificity and make the override happen afterthe original style:
相反，通过使用具有相同特异性的选择器来利用级联，并在原始样式之后进行覆盖：
/* older style in some library */
.foo .bar .baz {
color: blue;
}
...in an overriding CSS file...
.foo .bar .baz {
color: green;
}
回答by Diodeus - James MacFarlane
The best way is to make a more specificCSS rule, such as:
最好的方法是制定更具体的CSS 规则，例如：
body #topSurround a:hover {
color: transparent;
}
Specificity is an important CSS concept, as described in this article:
特异性是一个重要的 CSS 概念，如本文所述：
http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
回答by Lee Theobald
I'd recommend trying:
我建议尝试：
#topSurround a:hover {
color: inherit;
}
As for how to overwrite what Bootstrap is adding, I think how you were doing it is best.
至于如何覆盖 Bootstrap 添加的内容，我认为你是如何做的最好。
回答by Mav55
To cancel out the property you can use unsetkeyword.
要取消该属性，您可以使用unset关键字。
So, in you custom css file you can do something like following:-
因此，在您的自定义 css 文件中，您可以执行以下操作：-
#topSurround a:hover {
color: unset;
}
According to the MDNWeb Docs:-
根据MDN网络文档：-
The unset CSS keyword resets a property to its inherited value if it inherits from its parent, and to its
initial valueif not. In other words, it behaves like theinheritkeyword in the first case, and like theinitialkeyword in the second case. It can be applied to any CSS property, including the CSS shorthand all.
如果属性是从其父级继承的，则 unset CSS 关键字将属性重置为其继承的值，
initial value如果不是，则重置为它的继承值。换句话说，它inherit在第一种情况下的行为类似于initial关键字，在第二种情况下的行为类似于关键字。它可以应用于任何 CSS 属性，包括所有的 CSS 简写。
回答by Spudley
Every CSS style has a natural default value. It's just not always none.
每个 CSS 样式都有一个自然的默认值。它只是不总是none。
Some may be 0(as in zero).
有些可能是0（如零）。
Some may be auto.
有些可能是auto。
Sometimes inheritis the best option.
有时inherit是最好的选择。
Colours can be set to transparent.
颜色可以设置为transparent。
If you're unsure what the default is, try creating a dummy page with just a plain unstyled element, and use the browser dev tools to see what the styles are set to.
如果您不确定默认值是什么，请尝试创建一个仅包含普通无样式元素的虚拟页面，并使用浏览器开发工具查看样式设置为什么。
