我如何检查和调整:在浏览器中的伪元素之前和之后？

Question

我创建了一些相当复杂的DOM元素,其中包含:after伪元素,我希望能够在Chrome Inspector或Firebug或同等版本中检查和调整它们.

尽管此WebKit/Safari博客文章(日期为2010年)中提到了此功能,但我无法在Chrome或Safari中找到此功能.Chrome确实至少有要检查的复选框:hover,:visited和:active状态,但是:before和:after无处可见.

此外,这篇博文(日期为2009年!)提到IE开发工具中存在此功能,但我目前正在使用Mac OS,所以这对我没有帮助.此外,IE不是我主要针对的浏览器.

有没有办法检查这些伪元素？

编辑:除了错误的Firebug无法检查这些元素,我发现Opera非常擅长于Inspecting:before和:after元素开箱即用.

Answer 1

在Chrome的Dev工具中,伪元素的样式在面板中可见:

否则,您还可以在JavaScript控制台中输入以下行,并检查返回的CSSStyleDeclaration对象:

getComputedStyle(document.querySelector('html > body'), ':before');

• window.getComputedStyle
• document.querySelector

Answer 2

从Chrome 31开始,伪元素在元素面板中显示为其父元素的子元素,如下图所示:

您可以像普通元素一样选择它们,但如果删除content样式,则也会删除伪元素,并且devtools焦点将更改为它的父级.

似乎继承的CSS样式不可见,您无法从元素面板编辑CSS内容.

Answer 3

Chrome不会显示:在DOM树中的之前和之后的伪元素,如果它们错过了"内容"属性.它应该被设置,即使它被设置为空.

这不会出现:

:after {
  background-color: red;
}

这将显示在检查员中:

:after {
  content: "";   
  background-color: red;    
}

希望能帮助到你.

Answer 4

至少从 Chrome 62 开始，DevTools 中有一个设置“显示用户代理影子 DOM”，它会显示其他伪元素，例如输入占位符，否则这些伪元素不会显示在 DOM 树中。

更多信息：/sf/answers/1879732361/

Answer 5

经过很多挫折之后,我发现firefox根本没有在文档树中显示伪元素,但是如果你选择了定义了伪元素的确切元素,那么它的伪元素的样式(s) )显示在右侧的样式规则部分中.对于萤火虫和内置检查("Q")都是如此,令我感到震惊的是,之前没有人愿意解释清楚.

显然,chrome/chromium对伪元素的处理非常优越,因为它们可以被选中(在文档树中和直接在页面上)并且像常规元素一样进行检查,具有布局,属性和其他所有元素,独立于它们的"所有者" ".

我目前使用的浏览器版本:Chromium 40.0.2214.91,Firefox 31.3.0.