Fatal编程技术网
  • css/
  • 如何阻止用户代理样式表覆盖我的css

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

css google-chrome firefox

如何阻止用户代理样式表覆盖我的css,css,google-chrome,firefox,Css,Google Chrome,Firefox,我试图在dom元素上设置cursor:pointer，但输入没有接受它（当我将鼠标悬停在复选框上时，我没有看到指针光标）。在chrome中，我看到“用户代理样式表”覆盖了我的css。Wtf <!doctype html> <body> <div class='a'> <input type='checkbox'> </div> <style> .a {

我试图在dom元素上设置cursor:pointer，但输入没有接受它（当我将鼠标悬停在复选框上时，我没有看到指针光标）。在chrome中，我看到“用户代理样式表”覆盖了我的css。Wtf

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

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


.a{
光标：指针；
}
我看到了这个问题：但我的问题似乎不是doctype，它是

使用
！重要提示
在这里是不可接受的，直接设置输入节点的样式也是不可接受的-我不必担心奇怪的浏览器useragent样式。发生什么事了

为了澄清，我的问题是关于为什么用户代理样式表覆盖css以及如何停止。我的问题不是我如何才能绕过这种行为。如果我没有弄错的话，css的正确行为是光标样式应该由子节点继承

这是css的预期行为吗

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

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

您可以通过以下两种方式实现您的目标：

  • 例如，创建一个直接选择输入的css类
    • 使用另一个css类，或
    • 在已定义的类中选择输入
    • 等
  • 在所有输入上显式设置光标样式的继承行为
    • 第（1）款：

    
.a、.a输入{
光标：指针；
}
    第（2）款：

    
输入{
游标：继承；
}
.a{
光标：指针；
}
    看起来这可能只是css本身，这是不幸的。我能想到的最通用的解决方法是定义这个css：

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

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

    通过详细说明我要说的解释来回答这个问题，css属性的最终值是根据post进行的四步计算（即规格、计算、使用和实际）

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

    因为，您没有任何输入的css属性，所以应用于输入的用户代理样式表优先于从类a继承的值。为了使用继承的值，您应该按照@bt的建议使用代码重写。 即

    
输入{
游标：继承；
}
    级联解释：


    我这里指的是详细的解释-
    控制CSS声明应用顺序的主要概念有三个：

  • 重要性
  • 特异性
  • 源顺序
    • CSS声明的重要性取决于它的指定位置。冲突声明将按以下顺序应用：；后面的将覆盖前面的：

  • 用户代理样式表
  • 用户样式表中的常规声明
  • 作者样式表中的常规声明
  • 作者样式表中的重要声明
  • 用户样式表中的重要声明
    • 特殊性和来源顺序与此问题无关，您可以参考上述参考文献进行解释

    在上面的代码中，因为您只有以 因此，元素直接优先

    简而言之，继承<级联<重要性<用户代理样式表 在你的情况下是优先顺序

    我认为我有这个问题，并检查了常见的疑点，Doctype等。这听起来很可笑，结果是我认为正在应用的样式在CSS中被注释掉了。然而，Chrome显示的样式似乎是一种实际样式，并被覆盖。

    据报道，这是Chrome的错误：

    这种行为只在Chrome中出现（它不在Firefox中，我没有测试Edge或其他浏览器）。Chrome应用淡黄色背景（
    #E8F0FE
    ）

    今天我得到了同样的问题，测试没有这样苍白的影响狩猎和勇敢。。。
    不知道为什么Chrome等了这么长时间（3年，还在计算）才想出一个解决方案。

    把类放在你的输入上，它就会工作。哦，有趣，匿名，所以当你的鼠标在输入上时，它会显示一个指针光标？我看到的是，输入节点从其父节点继承了游标样式，但用户代理样式表将其重写为没有指针游标。你可以在复选框周围看到一个很薄的区域，它确实显示了指针光标，但在它里面却没有。Chrome的用户代理样式表侵犯了我们的自由，google总是很粗鲁。它甚至应用字体大小和字体名称，这真是自大。chrome是这个世界上最愚蠢的东西。看看你实际展示的东西：为什么“直接设置输入元素的样式”是不可接受的？对于
    div.a输入[type=checkbox]{cursor:pointer；}
    ，什么可能是不合适的？特别是考虑到你接受的答案正好说明了这一点。令人反感的是，它不应该是必要的。我接受了Beterraba的答案，因为这是一个解决办法。然而，这显然是chrome中的一个bug。我理解这是可行的，但在我的问题中，我明确表示这不是我想要的答案类型。您是否暗示这就是用户代理样式表的工作方式？优先权 
    <style>
  .a, .a input {
      cursor: pointer;
  }
</style>

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

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

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