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

Question

我有这样的CSS代码:

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

我可以单击"Inspect element"并查看有关元素的所有样式信息.但是我可以在哪里看到已应用于元素占位符的所有CSS规则？

Answer 1

只是为了给仍然访问此页面的任何人提供更新的答案，在 FireFox v66 中，您只需在开发人员工具中检查元素时单击样式面板中的展开图标即可显示伪元素样式 - 请参阅屏幕截图：

Answer 2

占位符是一个伪元素,如:: before和:: after(https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements)有时称为伪类(https:/ /developer.mozilla.org/en-US/docs/Web/CSS/pseudo-classes)

Firefox Inspector中无法看到这些类型的元素,您至少需要Firebug或Chrome Dev Tools,但最近它也可以在Firefox Inspector中使用.它们是"影子dom"的一部分(极其简单的描述:浏览器在其他元素内部创建的元素).

您应该能够在输入或textarea元素中的dom检查器中找到占位符,例如选择一个输入元素,然后从右键菜单中选择"inspect element",那么您应该看到类似的内容:

Firefox Inspector

Chrome开发工具

对于Chrome,您可能需要在开发工具设置中启用"显示用户代理影子DOM".