Question

我试图将光标：指针设置在dom元素上，但是输入没有接受它（当我将鼠标悬停在复选框上时，我没有看到指针光标）。在chrome中，我看到＆＃34;用户代理样式表＆＃34;是压倒我的CSS。跆拳道？

<!doctype html>
<body>
    <div class='a'>
        <input type='checkbox'>
    </div>

    <style>
        .a {
            cursor: pointer;
        }
    </style>
</body>

我已经看到了这个问题：Why does user agent stylesheet override my styles?但我的问题似乎不是doctype，即the recommended doctype。

使用!important在这里是不可接受的，也没有直接为输入节点设置样式 - 我不必担心奇怪的浏览器使用方式。发生了什么事？

为了澄清，我的问题是关于用户代理样式表覆盖css以及如何使停止的原因。我的问题是不我怎么能解决这个问题。如果我没有弄错，css的正确行为是光标样式应该由子节点继承。

这是css的预期行为吗？

Answer 1

这里的“问题”是作者样式表中实际上没有input样式（有关详细信息，请参阅the spec），因此定义的样式在用户代理样式表中使用。

（相关）用户代理规则（在chrome上）是：

input, input[type="password"], input[type="search"] {
   cursor: auto;
}

您可以通过以下几种方式实现自己想要的目标：

例如，创建一个直接选择输入的css类
- 使用其他css类，或
- 在已定义的类中选择输入
- 等
在所有输入上显式设置光标样式的继承行为

对于（1）：

<style>
  .a, .a input {
      cursor: pointer;
  }
</style>

对于（2）：

<style>
  input {
      cursor: inherit;
  }
  .a {
      cursor: pointer;
  }
</style>

Answer 2

似乎这可能只是css是css，这是不幸的。我能想出的最常用的解决方法是定义这个css：

<style>
  input {
    cursor: inherit;    
  }
</style>

这允许我最初期望在用户代理否则会导致样式不继承的所有情况下发生的行为。这比使用“cursor：pointer”直接设置输入样式更好，因为您只需要将此样式设置一次，并且任何包含输入的“cursor：pointer”样式的domNode将自动使输入具有指针光标。

Answer 3

回答这个问题通常会详细解释我会说的，css属性的最终值是根据this帖子的四步计算（即规范，计算，使用和实际）。

在规范中，级联优先于继承。

因为，您没有输入的任何css属性，因此应用于输入的用户代理样式表优先于来自类a的继承值。为了使用继承的值，您应该使用@B T建议的代码覆盖。即

<style>
  input {
    cursor: inherit;    
  }
</style>

级联说明：

Brief explanation
Detailed explanation

我在这里提到详细解释 -
控制CSS声明的顺序有三个主要概念：

重要性
特异性
来源订单

重要性取决于指定的位置。冲突的声明将按以下顺序适用;以后会覆盖以前的那些：

用户代理样式表
用户样式表中的正常声明
作者样式表中的正常声明
作者样式表中的重要声明
用户样式表中的重要声明

特异性和来源顺序与此问题无关，您可以参考上面的参考资料来解释相同的

在上面的代码中，因为您只有用户代理样式表   直接元素，因此优先。

简短继承＆lt;级联＆lt;重要性＆lt;用户代理样式表   在你的情况下是优先顺序。

Answer 4

据报道这是Chrome的错误：User Agent Style shows as being overridden, but when the page renders, it's not

此行为仅在Chrome中可见（在Firefox中不可见，我没有测试Edge或其他产品）。 Chrome应用浅黄色背景（#E8F0FE）

今天我遇到了同样的问题，在Safari和Brave上没有类似的苍白效果测试过... 不确定为什么Chrome如此漫长的等待时间（长达3年，并且还在不断增加）来解决问题。

Answer 5

我以为我遇到了这个问题并检查了通常的嫌疑人，Doctype等。听起来很荒谬，结果我认为应用的风格在CSS中被注释掉了。但是，Chrome正在将样式显示为实际样式并被覆盖。

如何阻止用户代理样式表覆盖我的CSS

5 个答案: