基于 webkit 的浏览器的 CSS 规则

我有下一个 CSS 代码：

#mgheader .letters {
  display: inline-block;
  margin-left: 55px;
  margin-top: -45px;
  position: absolute;
}

#mgheader .letters {
  display: inline-block;
  margin-left: 10px;
  position: absolute;
}

现在我想要仅在 Google Chrome 和 Safari 中执行第一个，在其他浏览器中执行第二个.

我尝试了这个，但第二个代码似乎总是在执行：

@media screen and (-webkit-min-device-pixel-ratio:0) {
  #mgheader .letters {
    display: inline-block;
    margin-left: 55px;
    margin-top: -45px;
    position: absolute;
  }
}   

#mgheader .letters {
  display: inline-block;
  margin-left: 10px;
  position: absolute;
}

我该如何解决这个问题？

问题是您正在使用非 webkit 样式覆盖 webkit 样式。 颠倒顺序应该可以解决这个问题：

#mgheader .letters {
  display: inline-block;
  margin-left: 10px;
  position: absolute;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  #mgheader .letters {
    display: inline-block;
    margin-left: 55px;
    margin-top: -45px;
    position: absolute;
  }
}  

您可能还想检查您的-webkit-min-device-pixel-ratio在所有使用 webkit 的设备上都会触发，但它可能会触发。

作为参考，层叠样式表是从上到下阅读的。关键词是级联。如果给出一条 CSS 规则before如果 CSS 规则相同，则后者优先。在您的示例中，您专门针对 webkit 浏览器进行样式设置，然后使用一般样式规则覆盖它。颠倒顺序意味着这里的 webkit 样式将覆盖一般样式（不影响非 webkit 浏览器）。