我正在一个站点中,在该站点中,主CSS文件的锚定大纲已设置为none,如下所示:
*:focus {
outline: none!important;
}
我添加了一个更具体的类来像上面这样覆盖上面的内容:
header a:focus {
outline: initial!important;
}
问题是这不起作用。下面的代码有效
outline: 2px solid $black!important;
但我希望浏览器的默认样式显示我认为应该可以通过“initial”关键字显示的样式,而不是尝试模拟所有默认样式的样式。
最佳答案
很有可能是您的浏览器没有: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>