Question

我正在开发一个网站，其中master css文件锚定大纲已设置为none，如下所示：

*:focus {
    outline: none!important;
}

我添加了一个更具体的类来覆盖上面的内容，如下所示：

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

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

outline: 2px solid $black!important;

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

Answer 1

很可能您的浏览器没有:focus伪类的默认outline。在这种情况下，initial和unset无法提供帮助。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

以下是您可以在各种浏览器中运行的测试。对我而言，它表明大多数浏览器的默认设置是缺少:focus状态的大纲。例外是IE11。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

如果您定义轮廓样式，并想“恢复”为：focus上的默认用户代理样式，这将有所帮助。使用初始属性，您会发现跨浏览器的问题。我建议使用此属性。

    x = r.nextInt();

Answer 3

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

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

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

3 个答案: