Question

在Chrome中，下面的按钮会在点击后保留它的轮廓。如果我在chrome的开发者工具中选择：active复选框后查看按钮css设置，我仍然无法看到大纲的CSS值。它看起来宽约1像素，视觉上看灰色，但我没有看到这些值。有没有办法看到它们？

<body>
  <button style="background-color: aquamarine; margin-top: 50px; margin-left: 50px;">HI</button>
</body>

换句话说，谷歌浏览器确实添加了这种风格（正如下面的答案之一所示）：

 :focus {
     outline: -webkit-focus-ring-color auto 5px;
 }

然而，当我点击focus复选框以便能够看到焦点触发的所有CSS时，我在开发人员工具窗格中看不到这种风格......是Google go developer工具bug或其他人看到它吗？

Answer 1

实际上有两种不同的样式通过用户代理样式表自动应用到按钮; pseudo-classes :focus 和 :active ：

:focus {
    outline: -webkit-focus-ring-color auto 5px;
}
button:active {
    border-style: inset;
}

:focus仅适用于Chrome，并且负责您所看到的蓝色边框。覆盖此问题可以解决问题：

＆＃13;

button:focus {
    outline: none; /* Remove the outline */
}
button.active: {
    border-style: none; /* Remove the border */
}

＆＃13;

<body>
  <button style="background-color: aquamarine; margin-top: 50px; margin-left: 50px;">HI</button>
</body>

＆＃13;

您可以看到:focus已通过用户代理样式表添加到开发者控制台中（位于此屏幕截图中的内联元素下方）：

希望这有帮助！：）

Answer 2

您可以发布网站链接吗？

与此同时，我建议您查看＆＃34; Computed＆＃34;样式标签

关于为什么会发生这种情况的附注 - 我注意到有时候当我的JavaScript控制按钮时，我还没有能够看到:active样式。国家

编辑：嗨Ole，我可以看到你的演示，谢谢。

基于Obsidian Age的有用回复，我运行了这段代码片段，它点击了边框。这就是你想要的行为吧？

＆＃13;

<body>
<style>
button:focus {
    outline: none; // Remove the outline
	border-top: none;
    border-width: 0;
}
button.active: {
    border-style: none; //Remove the border
}
</style>
  <button style="background-color: aquamarine; margin-top: 50px; margin-left: 50px;">HI</button>
</body>

＆＃13;

查看＆＃34; Computed＆＃34;选项卡（＆＃34;样式＆＃34;当您正在检查Chrome中的元素时），我看到有一个灰色的，2px宽的边框顶部，正确，底部，左边的按钮。出于某种原因，将border-top属性设置为none并将border-width设置为0就足够了。我不知道为什么，但我尝试了一堆其他无法正常工作的组合 - 这个用最少量的CSS做到了。

Answer 3

chrome开发人员工具中的样式控制台仅显示当前在其当前状态中选择的内容。如果你想查看其他状态的规则，一个简单的方法是自己转到css文件。要在元素类旁边执行此操作，可以使用如下图所示的链接。单击此按钮将打开所选类的特定行中的实际css文件。假设其他州被宣布接近，你将能够找到你想要的班级。

在chrome开发人员工具中查看活动的css元素大纲样式？

3 个答案: