B T*_*B T 38 css firefox google-chrome
我正在尝试将光标:指针设置在dom元素上,但是输入没有接受它(当我将鼠标悬停在复选框上时,我没有看到指针光标).在chrome中,我看到"用户代理样式表"覆盖了我的CSS.跆拳道？
<!doctype html>
<body>
<div class='a'>
<input type='checkbox'>
</div>
<style>
.a {
cursor: pointer;
}
</style>
</body>
我已经看到了这个问题:为什么用户代理样式表会覆盖我的样式？但我的问题似乎不是doctype,这是推荐的doctype.
!important在这里使用是不可接受的,也没有直接为输入节点设置样式 - 我不必担心奇怪的浏览器useragent样式.这是怎么回事？
为了澄清,我的问题是关于为什么用户代理样式表是压倒一切的CSS以及如何使该停止.我的问题不是我如何破解这种行为.如果我没弄错的话,css的正确行为是游标样式应该由子节点继承.
这是css的预期行为吗？
Bet*_*aba 20
"问题"这里原来有没有input在作者样式表样式(见规范获取更多信息),因此该风格被用于在用户代理样式表中定义.
(相关)用户代理规则(在chrome上)是:
input, input[type="password"], input[type="search"] {
cursor: auto;
}
您可以通过以下几种方式实现您的目标:
对于(1):
<style>
.a, .a input {
cursor: pointer;
}
</style>
对于(2):
<style>
input {
cursor: inherit;
}
.a {
cursor: pointer;
}
</style>
看起来这可能只是 css 是 css，这是不幸的。我能想到的最通用的解决方法是定义这个 css：
<style>
input {
cursor: inherit;
}
</style>
这允许我最初预期在用户代理会导致样式无法继承的所有情况下发生的行为。这比直接使用“cursor:pointer”设置输入样式更好，因为您只需要设置一次这种样式，并且任何包含输入的“cursor:pointer”样式的 domNodes 都会自动让输入具有指针光标。
一般来说，通过详细阐述解释来回答这个问题，我想说，根据这篇文章，css属性的最终值是四步计算（即规范、计算、使用和实际）。
在规范中，级联优先于继承。
由于 ，您没有任何输入的 css 属性，因此应用于输入的用户代理样式表优先于从类 a 继承的值。为了使用继承的值，您应该使用 @B T 建议的代码进行覆盖。即。
<style>
input {
cursor: inherit;
}
</style>
级联解释：
我在这里引用详细解释 -
控制 CSS 声明应用顺序的三个主要概念：
CSS 声明的重要性取决于它的指定位置。冲突的声明将按以下顺序应用；后面的将覆盖前面的：
特异性和来源顺序与这个问题无关，您可以参考上面的参考文献以获取相同的解释
在上面的代码中，由于您只有直接与元素绑定的用户代理样式表，因此优先。
简而言之，继承<级联<重要性<用户代理样式表是您的情况的优先顺序。