问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

社区维基
1
新手上路，请多包涵

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

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

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

我见过这个问题： 为什么用户代理样式表会覆盖我的样式？ 但我的问题似乎不是 doctype，这是 推荐的 doctype 。

在这里使用 !important 是不可接受的，也不能直接设置输入节点的样式 - 我不必担心奇怪的浏览器用户代理样式。这是怎么回事？

为了澄清，我的问题是关于为什么用户代理样式表 会 覆盖 css 以及如何让它停止。我的问题 不是 我如何破解这种行为。如果我没记错的话，css的正确行为是光标样式应该被子节点继承。

这是css的预期行为吗？

原文由 B T 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译cssgoogle-chromefirefox
阅读 3.9k
2 个回答
得票最新
社区维基
1
✓ 已被采纳

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

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

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

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

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

对于 (1)：

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

对于 (2)：

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

原文由 Beterraba 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

看起来这可能只是 css 是 css，这很不幸。我能想到的最通用的解决方法是定义这个 css：

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

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

原文由 B T 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
被 1 篇内容引用
推荐问题