17

我有这样的CSS代码：

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

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

4

3 回答 3

7

占位符是一个伪元素，例如 ::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 中使用。它们是“shadow dom”的一部分（非常简单的描述：由浏览器在其他元素内部创建的元素）。

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

火狐检查器

Firefox Inspector 伪元素

Chrome 开发工具

ChromeDevTools 检查元素

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

于 2013-09-16T09:01:02.293 回答
4

只是为了给仍在访问此页面的任何人提供更新的答案，在 FireFox v66 中，您可以通过在开发人员工具中检查元素时单击样式面板中的展开图标来显示伪元素样式 - 参见屏幕截图： 在此处输入图像描述

于 2019-05-27T12:32:21.287 回答
3
  1. 在您的地址栏中，转到：about:config
  2. 搜索属性：dom.webcomponents.enabled 并将其标记为 true。
  3. 如果您已经在开发页面上，请记住重新加载它。

之后，您将能够单击伪元素 :before & :after 并查看它们的样式。不知道为什么这个被禁用，在 Chrome 中默认工作。

从这个链接

于 2015-10-19T13:52:46.683 回答