无法将 CSS 大纲重置为浏览器默认值答案

【问题标题】：Cannot reset CSS outline to browser default无法将 CSS 大纲重置为浏览器默认值
【发布时间】：2026-01-22 09:40:01
【问题描述】：

我正在一个网站上，其中主 css 文件中的锚大纲已设置为 none，如下所示：

*:focus {
    outline: none!important;
}

我添加了一个更具体的类来覆盖上面的这个：

header a:focus {
    outline: initial!important;
}

问题是这不起作用。下面的代码有效

outline: 2px solid $black!important;

但我希望浏览器默认样式显示我认为应该可以使用“initial”关键字而不是我试图模仿所有默认样式。

【问题讨论】：

设置initialworks for me。请创建一个工作示例来帮助演示您的问题。
initial does not refer to the browser default.
@BoltClock 好的，那么我该怎么做才能引用浏览器默认值？

标签： html css browser sass cross-browser

【解决方案1】：

今天我偶然发现了这个。一个简单的解决方法是使用revert。适用于我的 Chrome。

.outline-reset {
  outline: revert !important;
}

【讨论】：

【解决方案2】：

很可能您的浏览器没有:focus 伪类的默认outline。在这种情况下，initial 和 unset 将无济于事。

如果您想要某些选择器的特定轮廓，则必须定义它：

:focus {
  outline: none;
}

header a:focus {
  outline: 1px dotted #666;
}

<p><a href="https://developer.mozilla.org/">https://developer.mozilla.org/</a></p>

      <nav>
        <ul>
          <li><a href="https://developer.mozilla.org/">https://developer.mozilla.org/</a></li>
        </ul>
      </nav>

      <header><a href="https://developer.mozilla.org/">https://developer.mozilla.org/</a></header>

在我的家用机器 (Windows 10) 上，我在 Firefox、Chrome、Edge 和 IE11 上进行了测试：:focus 默认情况下没有显示轮廓。

这是一个可以在各种浏览器中运行的测试。对我来说，它表明大多数浏览器中的默认设置是:focus 状态没有轮廓。 IE11 除外。

:focus {
  outline: 1px dotted #f60;
}

section :focus {
  outline: initial;
}

<body>
  <h2>With specified <code>:focus</code> outline</h2>
  <p><a href="https://developer.mozilla.org/">https://developer.mozilla.org/</a></p>

  <nav>
    <ul>
      <li><a href="https://developer.mozilla.org/">https://developer.mozilla.org/</a></li>
    </ul>
  </nav>

  <form>
    <button type="button">button button</button>
    <button type="button">submit button</button>
    <input type="submit" value="submit input">
    <input type="image" src="https://via.placeholder.com/100x30" border="0" alt="Submit" />
  </form>
  <a href="https://developer.mozilla.org/"><img src="https://via.placeholder.com/200x30"></a>

  <hr>

  <section>
    <h2>With <code>:focus</code> outline reset to <code>initial</code></h2>
    <p><a href="https://developer.mozilla.org/">https://developer.mozilla.org/</a></p>

    <nav>
      <ul>
        <li><a href="https://developer.mozilla.org/">https://developer.mozilla.org/</a></li>
      </ul>
    </nav>

    <form>
      <button type="button">button button</button>
      <button type="button">submit button</button>
      <input type="submit" value="submit input">
      <input type="image" src="https://via.placeholder.com/100x30" border="0" alt="Submit" />
    </form>
    <a href="https://developer.mozilla.org/"><img src="https://via.placeholder.com/200x30"></a>
  </section>

【讨论】：

我在 chrome 中测试，还没有看过任何其他浏览器。所以 display: initial 在 chrome 中不适合你？

【解决方案3】：

如果您定义大纲样式并希望在 :focus 上“恢复”回默认的用户代理样式，这将有所帮助。你会发现使用初始属性的跨浏览器问题...我推荐这个。

.myClass:focus {
  outline: 1px dotted #212121;
  outline: 5px auto -webkit-focus-ring-color;
}

【讨论】：