如何使用CSS定位除Firefox外的所有浏览器？

之前我们知道可以用下面的CSS专门定位Firefox：

@-moz-document url-prefix() {
  h1 {
    color: red;
  }
}

<h1>This should be red in FF</h1>

现在要实现给除Gecko/Firefox外的所有浏览器应用某条CSS规则，有两种靠谱的方法：

• 方法一：先全局应用，再给Firefox覆盖
  思路很直接：先给所有浏览器设置你想要的样式，然后针对Firefox单独重置或修改回兼容的样式。示例代码：

  /* 所有浏览器都会应用这个目标样式 */
  .your-target-element {
    margin-top: 20px;
    /* 其他你需要的规则 */
  }
  
  /* 仅Firefox会执行这里的覆盖，还原为合适的样式 */
  @-moz-document url-prefix() {
    .your-target-element {
      margin-top: initial; /* 重置为默认值，或者设置Firefox兼容的样式 */
    }
  }
  

• 方法二：用CSS特性查询精准筛选
  利用@supports规则检查浏览器是否不支持Firefox特有的-moz-appearance属性，这样就能精准命中非Firefox浏览器：

  /* 只有不支持-moz-appearance的浏览器（即非Firefox）会应用这个规则 */
  @supports not (-moz-appearance: none) {
    .your-target-element {
      margin-top: 20px;
      /* 其他你需要的规则 */
    }
  }
  

第二种方法更推荐，因为它是正向筛选目标浏览器，不需要额外的覆盖步骤，逻辑更清晰。

内容的提问来源于stack exchange，提问作者Steve