无法将 CSS 大纲重置为浏览器默认值
Posted
技术标签:
【中文标题】无法将 CSS 大纲重置为浏览器默认值【英文标题】：Cannot reset CSS outline to browser default 【发布时间】：2018-10-07 17:43:38 【问题描述】：我正在一个网站上，其中主 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 好的，那么我该怎么做才能引用浏览器默认值？
【参考方案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" />
</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" />
</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;
【讨论】：
以上是关于无法将 CSS 大纲重置为浏览器默认值的主要内容，如果未能解决你的问题，请参考以下文章