我已经创建了一些相当精细的DOM元素与一个:伪元素后,我想能够检查和调整他们在Chrome检查器或Firebug或等效。
尽管在this WebKit/Safari blog post(2010年)中提到了此功能,但在Chrome或Safari中找不到此功能。 Chrome至少有复选框检查:hover,:visited和:活动状态,但:before和:after是无处可见。
此外,this blog post(2009年)提到这种能力存在于IE开发工具,但我目前使用Mac OS,所以这对我没有帮助。此外,IE不是我主要定位的浏览器。
有没有什么方法检查这些伪元素?
编辑:除了错误的Firebug无法检查这些元素,我发现Opera是相当不错的检查:之前和:后的元素开箱。
解决方法
在
Chrome’s Dev tools,伪元素的样式在面板中可见:
否则,您还可以在JavaScript控制台中输入以下行,并检查返回的CSSStyleDeclaration
对象:
getComputedStyle(document.querySelector('html > body'),':before');