Webkit 伪元素文档答案

【问题标题】：Webkit Pseudo Elements DocumentationWebkit 伪元素文档
【发布时间】：2022-03-28 02:42:16
【问题描述】：

我实际上已经完成了我想做的事情：当我想打印它时，从页面中隐藏一些 webkit 伪元素，代码如下所示。

问题是我没有从我的研究中学到任何东西，我找不到任何关于它的文档，我看到的关于这个主题的每个答案都只显示代码，没有任何进一步的解释。

::-webkit-resizer,
::-webkit-calendar-picker-indicator {
    display: none; 
    -webkit-appearance: none;
}

一些来源：

https://developer.mozilla.org/en-US/docs/Web/CSS/WebKit_Extensions
- 这个显示了一些扩展，但 callendar 没有在此处列出，我无法在其他地方找到。
https://gist.github.com/afabbro/3759334
- 这个要点有很多伪元素、类或属性，但是做这件事的人没有解释他是如何实现的，这些也没有显示在我的开发工具上。
Use pseudo classes for selecting webkit pseudo elements
- 这家伙说的是shadow-dom，我以前没听说过，但在我的研究中，我不明白它对我有什么帮助。

一些类似的答案：6195329、11418289、17340038、15530850、53483852

还访问了维基百科的文章和这个网站：https://webkit.org/

我真的很想了解这个 webkit 背后的概念，如果有任何帮助，我会很高兴的。

更具体地说：如果将来我想覆盖一个组件，我如何知道在给定浏览器的组件上应用了哪些伪元素？

【问题讨论】：

【解决方案1】：

了解可以使用哪些伪元素的最佳方法是阅读规范（如W3C standards）和可靠的文档和资源（如MDN）。如果你在那里找不到特定的伪元素（或者如果它只被 vendor prefix 引用），你应该避免使用它。

::-webkit-calendar-picker-indicator 似乎得到了 Blink 和 WebKit 的支持（点击链接获取少量信息），但由于它的文档记录不充分而且不标准，我根本不会采用它。

【讨论】：

【解决方案2】：

没有关于伪元素的具体文档，但我终于可以在修改 Chrome 开发工具的首选项时找到一个显示来自用户代理的“Shadow-Dom”的设置。

转到“首选项”并滚动到“元素”部分，其中有一个选项：

【讨论】：