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

我已经使用伪元素创建了一些相当复杂的DOM元素，并且希望能够在Chrome Inspector或Firebug或同等版本中检查并调整它们。我如何检查和调整：之前和之后：在浏览器中的伪元素？

尽管在this WebKit/Safari blog post（2010年）中提到了此功能，但在Chrome或Safari中都找不到此功能。 Chrome至少有复选框可以检查：hover，：visited和：active states，但是：before和after之后无处可见。

此外，this blog post（日期为2009年！）提到这种功能存在于IE开发工具中，但我目前正在使用Mac OS，所以这对我没有任何帮助。另外，IE不是我主要针对的浏览器。

有没有检查这些伪元素的方法？

编辑：除了错误的关于Firebug无法检查这些元素，我发现Opera在检查：在开箱即用之前和之后都很擅长。

来源

2012-04-16 majackson

与萤火虫，你可以检查这些pseudoelements的*风格*。 – fcalderan 2012-04-16 13:14:47

@ F.Calderan怎么样？如果我修改它，它会更新页面吗？ – majackson 2012-04-16 13:22:39

是的，我可以通过Fx11/MacOS上的萤火虫1.9.1更改pseudoelements的属性 – fcalderan 2012-04-16 13:26:13

在Chrome's Dev tools，样式伪元素在面板中可见：

否则，你也可以输入在JavaScript控制台下面一行，并检查返回CSSStyleDeclaration对象：

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

来源

2012-04-16 13:26:07

我没看到这个。你在检查什么元素才能看到它出现在面板中？另外，你使用的是什么版本的Chrome？ – majackson 2012-04-16 13:28:07

@majackson Chrome 18.0 Ubuntu 11.10。在本演示中检查'x'：http://jsfiddle.net/2M6JA/ – 2012-04-16 13:28:59

我在演示中看到了伪类，但没有看到我的代码，这让我怀疑我遇到了另一个不同的问题。无论如何，很明显你是对的，所以我会把它标记为已解决 - 非常感谢！ – majackson 2012-04-16 13:34:46

自Chrome 31伪元素的显示元素面板作为它们的父的子元素图如下图所示：

Screenshot

您可以选择它们，你会正常元素，但如果删除content样式，则伪元素也将被删除，devtools焦点将更改为其父项。

看起来，继承的CSS样式是而不是可见，而且您无法从元素面板编辑CSS内容。

来源

2013-11-14 13:19:03

我只是偶然发现它，它是真正有用的（除了你在最后一段中指出的）。谢谢回答。 – bfncs 2013-11-15 10:06:10

@boundaryfunctions不客气！希望Devtools团队能够看到并更新它。 – 2013-11-15 12:21:58

Firefox已经有了这个功能一段时间了，只需右键单击“检查元素”，然后在检查器的右侧面板中查看前后元素。

来源

2014-02-12 06:49:52 NoBugs

我没有在“native”检查器工具中看到'：after'和'：before'伪元素 - 切换伪元素只给出了'悬停'，'主动'和'焦点'。虽然我可以在Firebug中看到它们。 – sameers 2015-10-15 23:16:40

@sameers你是否在谈论右键菜单上的切换？因为：之前和之后不是你在那里切换的东西，它们应该总是显示在CSS检查器中。 – NoBugs 2015-10-16 12:37:55

Chrome不会在DOM树中的伪元素之前和之后显示，如果他们错过“content”属性。它应该被设置，即使它被设置为无。

这将不会显示：

:after { 
    background-color: red; 
}

这将在检查显示：

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

希望它能帮助。

来源

2014-02-17 13:17:04 pop

这非常有帮助！我找不到一些我的后续元素，现在我知道它的原因。 – Arashsoft 2016-10-07 19:55:59

谢谢你，+1 – 2018-02-15 15:07:30

很多的挫折之后，我想通了，Firefox不会在所有显示在文档树伪元素，但如果你选择具有定义，那么伪元素（S）的确切元素其伪元素的样式显示在右侧的样式规则部分。对于萤火虫和内置检查（“Q”）都是如此，我很震惊没有人打算在此之前清楚地解释这一点。显然，铬/铬对伪元素的处理非常优越，因为它们可以选择（既可以在文档树中，也可以直接在页面上），并像普通元素一样进行检查，包括布局，属性和其他所有元素，独立他们的“所有者”。

我目前使用的浏览器版本：Chromium 40.0.2214.91，Firefox 31.3.0。

来源

2015-02-25 08:16:27 aditsu

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

回答

相关问题