html - 无法将CSS大纲重置为浏览器默认值

我正在一个站点中,在该站点中,主CSS文件的锚定大纲已设置为none,如下所示:

*:focus {
    outline: none!important;
}

我添加了一个更具体的类来像上面这样覆盖上面的内容:
header a:focus {
    outline: initial!important;
}

问题是这不起作用。下面的代码有效
outline: 2px solid $black!important;

但我希望浏览器的默认样式显示我认为应该可以通过“initial”关键字显示的样式,而不是尝试模拟所有默认样式的样式。

最佳答案

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

如果您想要某些选择器的特定轮廓,则必须对其进行定义:

: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>