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

Question

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

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

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

我找不到关于这个star-pipe语法的任何信息,但我认为它是某种逻辑OR命令,可以在Webkit/Mozilla中运行,但不能在IE中运行.

将该行改为:

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中使用的命名空间,虽然我确信它发生了很多.你可以放弃离开*|,但重要的是你在做出决定之前理解它为什么存在.