html - Chrome 开发者工具中出现额外的 CSS？

Question

我在 Chrome 中打开的每个网站，包括我自己编写的网站，在开发人员工具中查看时，在其基础上都有以下 HTML/CSS。

<style>
.tb_button {padding:1px;cursor:pointer;border-right: 1px solid #8b8b8b;
     border-left: 1px solid #FFF;border-bottom: 1px solid #fff;}
.tb_button.hover {borer:2px outset #def; background-color: #f8f8f8 !important;}
.ws_toolbar {z-index:100000} .ws_toolbar 
.ws_tb_btn {cursor:pointer;border:1px solid #555;padding:3px}   
.tb_highlight{background-color:yellow} .tb_hide {visibility:hidden} 
.ws_toolbar img {padding:2px;margin:0px}
</style>

截图如下:

如果您查看源代码，则此代码不可见。它来自哪里？

Answer 1

这是 Chrome 扩展“网页截图”中叠加按钮的样式表信息。

如果禁用它，您会看到它消失了。它是用于选择区域的工具栏弹出式样式信息，您可以在该区域中通过浏览器呈现的覆盖层直接在页面顶部进行截图、绘制和保存。