我使用 :after 伪元素创建了一些相当复杂的 DOM 元素，并且我希望能够在 Chrome Inspector 或 Firebug 或等效工具中检查和调整它们。
尽管这个功能被提到这篇 WebKit/Safari 博客文章 http://www.webkit.org/blog/1091/more-web-inspector-updates/（2010 年），我在 Chrome 或 Safari 中根本找不到此功能。 Chrome 至少有检查 :hover、:visited 和 :active 状态的复选框，但是 :before 和 :after 却看不到。
此外，这篇博文 http://meyerweb.com/eric/thoughts/2009/11/03/pseudo-phantoms/（2009 年！）提到 IE 开发工具中存在此功能，但我目前使用的是 Mac 操作系统，所以这对我没有帮助。此外，IE 并不是我主要针对的浏览器。
有什么方法可以检查这些伪元素吗？
编辑：除了 Firebug 无法检查这些元素的错误之外，我还发现 Opera 非常擅长检查 :before 和 :after 开箱即用的元素。
In Chrome 的开发工具 https://developers.google.com/chrome-developer-tools/docs/elements-styles，伪元素的样式在面板中可见：
否则，您也可以在 JavaScript 控制台中输入以下行，然后检查返回的结果CSSStyleDeclaration https://developer.mozilla.org/en/DOM/CSSStyleDeclaration object:
getComputedStyle(document.querySelector('html > body'), ':before');
- window.getComputedStyle https://developer.mozilla.org/en/DOM/window.getComputedStyle
- document.querySelector https://developer.mozilla.org/en/DOM/Document.querySelector
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
