如何在Firefox中调试占位符伪元素？

:-moz-placeholder,::-moz-placeholder { 
    color: #999; 
    /*some additional font styling*/ 
}

我可以点击“检查元素”，并看到有关元素的所有样式信息。但是，在哪里可以看到已应用于元素占位符的所有CSS规则？

2013-07-16 Cherry

你想沿着线是找**显示用户代理CSS **（Firebug的），但它为每个浏览器/ DOM检查工具是不同的。如果我今天得到时间，我会写一个完整的答案。 – Xareyo

听起来像您使用内置的Firefox检测工具。所以你想要去_Inspect元素（Q）>计算>勾选'浏览器样式'框底部_ – Xareyo

这些类型的元件不能在火狐检查可以看出，你需要至少Firebug或Chrome开发工具，但最近它也可以在Firefox Inspector中使用。它们是“影子之王”（极简单的描述：由其他元素内部的浏览器创建的元素）的一部分。

您应该能够在输入或textarea元素内的dom检查器中找到占位符，例如，选择输入元素，然后选择 “检查元素”，从右键菜单，那么你应该看到类似的东西：

火狐督察

Chrome开发工具

ChromeDevTools Inspect Element

对于Chrome，您可能需要启用“显示用户代理shad开发工具“设置中的”ow DOM“。

2013-09-16 09:01:02 RiZKiT

如果你继续解释在Firbug和/或Chrome工具中找到占位符的位置，这个答案会更好。 – Jeff

在Chrome中，您可以通过上图（或接近）中的齿轮切换阴影dom。这将打开设置，并有一个“显示阴影大教堂”选项，检查并刷新页面以查看阴影DOM。 –

伪元素与伪类不同。根据规范：“'::'开始一个伪元素，'：'一个伪类”（在http://dev.w3.org/csswg/selectors-4） –

之后，您将能够点击伪元素：之前&：之后，看看他们的风格。不确定为什么这是禁用的，默认情况下在Chrome中运行。

从这个link

2015-10-19 13:52:46 Bobz

回答