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

本文介绍了如何阻止用户代理样式表覆盖我的CSS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试在dom元素上设置cursor：指针，但是输入没有使用它（将鼠标悬停在复选框上时，看不到指针光标）。在chrome中，我看到用户代理样式表覆盖了我的CSS。

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?

<!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.

在这里不接受使用！important ，也不直接对输入节点进行样式设置-我不应该不得不担心奇怪的浏览器用户代理样式。发生了什么事？

Using !important isn'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?

要澄清，我的问题是有关用户代理样式表为何覆盖CSS以及如何使那个停止。我的问题是 not 我该如何破解这种行为。如果我没记错的话，css的正确行为是游标样式应由子节点继承。

To clarify, my question is about why the user agent stylesheet is overriding the css and how to make that stop. My question is not how 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的预期行为吗？

Is this the expected behavior of css?

推荐答案

这里的问题是实际上没有输入作者样式表中的样式（有关更多信息，请参见），因此使用在用户代理样式表中定义的样式。

The "problem" here is that there is actually no input style in the author stylesheet (see the spec for more info), and therefore the style that is defined in the user agent stylesheet is used.

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

The (relevant) user agent rule (on chrome) is:

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

您可以通过以下几种方式实现所需的目标：

You can achieve what you want in a couple ways:

创建一个直接选择输入的css类，例如使用另一个css的
- 类，或者
- 在已定义的类中选择输入，
- 等

对于（1）：

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

对于（2）：

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

这篇关于如何阻止用户代理样式表覆盖我的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！