css - 在网页上关注并显示当前聚焦的元素

Question

我想通过部署的网页调试选项卡索引流。当前的 css 在许多输入元素上都有 outline:none。

在 chrome 中，执行全局 css 覆盖的最佳方法是什么，以便我在浏览网站时可以清楚地看到选定/聚焦的元素？

Answer 1

检查页面上的元素(右键单击它并选择“检查”)，在元素选项卡中右键单击它，从列表中选择“:focus”，查看样式选项卡(应该已经打开)对于设置 outline:none 规则的样式规则，取消选中所有 outline:none 样式旁边的复选框(您可能需要从多个规则中滚动或取消选中它们)。这将允许您在浏览器中看到默认的大纲样式，而无需更改生产代码。每次打开页面进行测试时，您都必须重复这些步骤。

编辑:这些步骤应该涵盖您需要这样做的大多数情况。如果您确实需要全局规则，也可以通过单击样式选项卡中的“+”图标并添加类似于 *:focus{outline:initial !important} 或类似的规则来添加。