如何阻止用户代理样式表覆盖我的 css
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24415385/
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 to stop user agent stylesheets from overriding my css
提问by B T
I'm trying to set cursor: pointer on a dom element, but the input isn't taking it (I am not seeing a pointer cursor when I hover over the checkbox). In chrome, I see that the "user agent stylesheet" is overriding my css. Wtf?
我正在尝试在 dom 元素上设置 cursor: 指针，但输入没有接受它（当我将鼠标悬停在复选框上时，我没有看到指针光标）。在 chrome 中，我看到“用户代理样式表”覆盖了我的 css。哇？
<!doctype html>
<body>
<div class='a'>
<input type='checkbox'>
</div>
<style>
.a {
cursor: pointer;
}
</style>
</body>
I have seen this question: Why does user agent stylesheet override my styles?But my problem does not seem to be the doctype, which is the recommended doctype.
我见过这个问题：为什么用户代理样式表会覆盖我的样式？但我的问题似乎不是 doctype，这是推荐的 doctype。
Using !importantisn't acceptable here, and neither is styling the input node directly - I shouldn't have to worry about weird browser useragent styles. What's going on?
!important在这里使用是不可接受的，也不能直接设置输入节点的样式 - 我不必担心奇怪的浏览器用户代理样式。这是怎么回事？
To clarify, my question is about why the user agent stylesheet is overriding the css and how to make thatstop. My question is nothow I can hack around this behavior. If I'm not mistaken, the correct behavior of css is that the cursor style should be inherited by child nodes.
为了澄清，我的问题是关于为什么用户代理样式表是压倒一切的CSS以及如何使该停止。我的问题不是我如何破解这种行为。如果我没记错的话，css 的正确行为是光标样式应该由子节点继承。
Is this the expected behavior of css?
这是 css 的预期行为吗？
采纳答案by Beterraba
The "problem" here is that there is actually no inputstyle in the author stylesheet (see the specfor more info), and therefore the style that isdefined in the user agent stylesheet is used.
“问题”这里原来有没有input在作者样式表样式（见规范获取更多信息），因此该风格被用于在用户代理样式表中定义。
The (relevant) user agent rule (on chrome) is:
（相关）用户代理规则（在 chrome 上）是：
input, input[type="password"], input[type="search"] {
cursor: auto;
}
You can achieve what you want in a couple ways:
您可以通过以下几种方式实现您想要的：
- Create a css class that selects the input directly, for example
- using another css class, or
- selecting the input within the already-defined class,
- etc
- Explicitly setting inheritance behavior for the cursor style on all inputs
- 创建一个直接选择输入的css类，例如
- 使用另一个 css 类，或
- 在已经定义的类中选择输入，
- 等等
- 为所有输入的光标样式显式设置继承行为
For (1):
对于（1）：
<style>
.a, .a input {
cursor: pointer;
}
</style>
For (2):
对于（2）：
<style>
input {
cursor: inherit;
}
.a {
cursor: pointer;
}
</style>
回答by B T
It seems like this might just be css being css, which is unfortunate. The most general workaround I can come up with is to defined this css:
看起来这可能只是 css 是 css，这是不幸的。我能想到的最通用的解决方法是定义这个 css：
<style>
input {
cursor: inherit;
}
</style>
This allows the behavior I originally expected to happen in all cases where the user agent would otherwise cause the style not to inherit. This is better than styling the input with "cursor: pointer" directly because you only have to set this style up once, and any domNodes with a "cursor: pointer" style that contain an input will automatically have the input have a pointer cursor.
这允许我最初预期在用户代理会导致样式无法继承的所有情况下发生的行为。这比直接使用“cursor:pointer”设置输入样式更好，因为您只需要设置一次这种样式，并且任何包含输入的具有“cursor:pointer”样式的 domNodes 都会自动让输入具有指针光标。
回答by Keshav
Answering this question generally with elaborating the explanation I would say, the final value of css property is a four step calculation ( ie. specification, computed, used and actual ) according to thispost.
回答这个问题一般会详细说明我会说的，根据这篇文章，css 属性的最终值是一个四步计算（即规范、计算、使用和实际）。
In specification, Cascading takes precedence over Inheritance.
在规范中，Cascading 优先于 Inheritance。
Since , you don't have any css property of input so user agent stylesheet applied to input takes precedence over inherited value from class a. In order to use inherited value you should override using code as suggested by @B T. ie.
因为，您没有输入的任何 css 属性，因此应用于输入的用户代理样式表优先于从类 a 继承的值。为了使用继承的值，您应该按照@B T 的建议使用代码覆盖。即。
<style>
input {
cursor: inherit;
}
</style>
Explanation of Cascading :
级联说明：
Brief explanation
Detailed explanation
I am referring detailed explanation here -
There are three main concepts that control the order in which CSS declarations are applied:
我在这里指的是详细解释 -
控制 CSS 声明应用顺序的三个主要概念：
- Importance
- Specificity
- Source order
- 重要性
- 特异性
- 货源订单
Importanceof a CSS declaration depends on where it is specified. The conflicting declarations will be applied in the following order; later ones will override earlier ones:
CSS 声明的重要性取决于它的指定位置。冲突的声明将按以下顺序应用；较晚的将覆盖较早的：
- User agent style sheets
- Normal declarations in user style sheets
- Normal declarations in author style sheets
- Important declarations in author style sheets
- Important declarations in user style sheets
- 用户代理样式表
- 用户样式表中的普通声明
- 作者样式表中的普通声明
- 作者样式表中的重要声明
- 用户样式表中的重要声明
specificity and source order is not relevant for this question, you could refer above references for explanation of the same
特异性和来源顺序与此问题无关，您可以参考上面的参考资料来解释相同的
In above code since you only have user agent style sheet bounded with the element directly, hence takes precedence.
In short inheritance < cascading < importance < user agent stylesheet is precedence order in your case.
在上面的代码中，由于您只有直接与元素绑定的用户代理样式表，因此优先。
简而言之，继承 < 级联 < 重要性 < 用户代理样式表在您的情况下是优先顺序。
回答by nambk
It's been reported as Chrome's bug here: User Agent Style shows as being overridden, but when the page renders, it's not
此处已报告为 Chrome 的错误：用户代理样式显示为被覆盖，但是当页面呈现时，它不是
This behaviour is seen in Chrome only (it is not in Firefox, I didn't test Edge or others). Chrome applies a pale yellow background (
#E8F0FE)
此行为仅在 Chrome 中可见（在 Firefox 中没有，我没有测试 Edge 或其他）。Chrome 应用淡黄色背景 (
#E8F0FE)
Today I got the same issue, tested with no such pale-effecton Safari and Brave... Not sure why the so-long-waiting (3 years and counting) from Chrome to come up with a fix.
今天我遇到了同样的问题，在 Safari 和 Brave 上测试没有这种苍白的效果......不知道为什么 Chrome 等了这么久（3 年和计数）想出一个修复程序。
回答by LarryBud
I thought I had this problem and checked the usual suspects, Doctype, etc. As ridiculous as this sounds, it turned out the style which I thought was being applied was commented out in the CSS. However, Chrome was displaying the style as if it was an actual style and being overridden.
我以为我有这个问题并检查了通常的嫌疑人、Doctype 等。尽管这听起来很荒谬，但结果我认为正在应用的样式在 CSS 中被注释掉了。但是，Chrome 将样式显示为实际样式并被覆盖。
