css – 如何在firefox中调试占位符伪元素?

前端之家收集整理的这篇文章主要介绍了css – 如何在firefox中调试占位符伪元素?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有这样的CSS代码
:-moz-placeholder,::-moz-placeholder {
    color:    #999;
    /*some additional font styling*/
}

我可以点击“检查元素”,查看有关元素的所有样式信息.但是我可以看到所有适用于元素占位符的CSS规则?

解决方法

占位符是一个伪元素,如:: 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检查器中看不到,您至少需要Firebug或Chrome开发工具,但最近也可以在Firefox检查器中使用.它们是“shadow dom”的一部分(极简单的描述:浏览器内部由其他元素创建的元素).

您应该可以在输入或文本区域元素中的dom检查器中找到占位符,例如.选择一个输入元素,然后从右键菜单中选择“检查元素”,然后您应该看到类似的内容

Firefox检查器

Chrome开发工具

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

原文链接:https://www.f2er.com/css/216840.html

猜你在找的CSS相关文章