Webkit 伪元素文档

Question

我实际上完成了我想做的事情：当我想打印它时，从页面中隐藏一些 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
- 这个要点有很多这些伪元素，类或属性，但是做它的人没有解释他是如何完成的，那些确实显示在我的开发工具上。
- 这家伙说的影子-dom，我以前没听说过，但在我的研究中我不明白它对我有什么帮助。

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

还访问了维基百科文章和此站点：https://webkit.org/

我真的很想了解这个 webkit 事物背后的概念，如果有任何帮助，我们将不胜感激。

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

Answer 1

了解您可以使用哪个 pseudo-elements 的最佳方法是阅读规范（例如 W3C standards) and realiable docs and resources (like MDN). If you can't find a particular pseudo-element there (or if it's only referred with a vendor prefix），您可能应该避免使用它。

::-webkit-calendar-picker-indicator 似乎得到了 Blink and WebKit 的支持（点击链接获取少量信息），但由于它的文档很少而且 non-standard 我不会在全部.

Answer 2

pseudo-elements 没有具体的文档，但我终于找到了，同时修改 Chrome Dev Tools 的首选项，显示“Shadow-Dom”的设置user-agent.

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

Webkit 伪元素文档

Webkit Pseudo Elements Documentation

html

css

css-selectors

pseudo-element