CSS选择器中的垂直线？答案

【问题标题】：Vertical line in CSS-selector?CSS选择器中的垂直线？
【发布时间】：2016-02-11 21:57:57
【问题描述】：

在 Google Chrome 的调试器中 46.0.2490.80 m 我发现了一些有趣的 svg 的 css-selector：

html|* > svg { /* css stuff */ }

(user agent stylesheet)

据我所知，这会选择所有 svg 元素，它们是 direct children 的……什么（html|*）？这条竖线是什么意思？

【问题讨论】：

【解决方案1】：

它将命名空间与选择器分开。在这种情况下，它会在 html 命名空间中查找所有 svg 元素，这些元素是另一个标签的直接子元素。

【讨论】：

如果你正在寻找“所有 svg 元素都是 html 标签的直接子元素”，为什么不去html > svg 呢？
@ChrisSmith 你改变了我说的话。我说“...... html 命名空间中另一个标签的直接子代”，这与“html 标签的直接子代”非常不同，假设“html 标签”是指名称为“html”的标签，而不是任何标签是 html 规范的一部分。 html > svg 会做前者，而html|* > svg 会做后者。
如果您只有一个简单的 html 文档（不是 xhtml），并且没有使用 svg 或对象等内容，那么文档中的每个标签都是 html 名称空间的一部分，所以html|* > svg 的作用与* > svg 相同，除了根 html 标记之外的所有标记。希望有帮助。否则，您需要查找命名空间以及它们的使用方式。