javascript - CSS3 选择器 [*|type ="toc"]

Question

我正在使用 EPUB.JS，它使用以下代码从 ePub 文件中获取一些信息:

var navEl = navHtml.querySelector('nav[*|type="toc"]')

这行代码在 IE10 中失败，因为 querySelector 返回 null。我以前从未见过格式为 [*|attr="val"] 的属性选择器，但我认为他们想说的是，“选择所有具有任何属性或名为“type”且值为“toc”的属性的导航元素。”

我找不到关于这种星形管道语法的任何信息，但我认为它是某种在 Webkit/Mozilla 中有效但在 IE 中无效的逻辑 OR 命令。

将该行更改为:

var navEl = navHtml.querySelector('nav')

有效，但我仍然想完全理解为什么当我觉得它毫无意义时他们可能会选择其他语法，以防万一它有可能导致其他地方出错的实际目的。

这个*|...有什么解释吗？甚至有必要吗？

Answer 1

namespace| 语法适用于类型选择器和属性选择器(可能还有其他)。这实际上是说“将 nav 与 type=toc 匹配，其中 type 在任何命名空间(包括没有命名空间)中。”它将匹配:

<nav foo:type="toc">

如果选择器只是[type=toc]，则不会选择上述元素，因为它在命名空间中。

http://www.w3.org/TR/css3-selectors/#attrnmsp

这在 IE10 中不起作用的事实可能是 IE 方面的错误。老实说，我什至从未见过在我见过的任何 HTML 中使用 namespace ，尽管我确信它经常发生。您可能只需省略 *| 即可，但重要的是您在做出决定之前了解它存在的原因。