仅针对 Safari 浏览器覆盖特定 css 类
有没有办法只覆盖 Safari 浏览器的 css？
我正在使用 Safari 版本 15.1，但希望能够定位任何版本。
通过codepen尝试了以下方法。但它不会在 Safari 中覆盖。
.myClass {
background-color: grey;
color: red;
width: 2000px;
height: 50px;
}
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) {
.safari_only {
.myClass {
background-color: yellow;
color: green;
width: 2000px;
height: 50px;
}
}
}}<html>
<body>
<div class="myClass">
Sample 1
</div>
</body>
</html>看到一些例子，例如下面解释 Safari 覆盖的例子。
但这些并没有覆盖 css 类。
Is there a way to override a css for only Safari browser?
I am using Safari version 15.1 but looking to be able to target any version.
Tried the following via codepen. But it does not override in Safari.
.myClass {
background-color: grey;
color: red;
width: 2000px;
height: 50px;
}
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) {
.safari_only {
.myClass {
background-color: yellow;
color: green;
width: 2000px;
height: 50px;
}
}
}}<html>
<body>
<div class="myClass">
Sample 1
</div>
</body>
</html>Seen examples such as following explaining safari overrides.
But these are not overriding a css class.
is there a css hack for safari only NOT chrome?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
-webkit-appearance（幸运与否）也受到 Firefox 和 Edge 的支持，如 mozilla 文档。
我唯一能想到的工作就是使用 JavaScript 来定位用户代理：
-webkit-appearance is (luckily or not) also supported by Firefox and Edge as mentioned in the mozilla documentation.
Only thing I can imagine to work is to use JavaScript to target the user agent: