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

Question

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

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

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

我找不到关于这种星型管道语法的任何信息，但我猜想这是某种逻辑或命令，它在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中使用名称空间，尽管我确信这种情况经常发生。您可能只需离开*|就可以逃脱，但是在做出决定之前，了解它存在的原因很重要。

Answer 2

所以，我只是想发布我的解决办法，以防任何人在未来遇到类似的情况。

我要把原来的querySelector留在原处：

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

但是，如果这导致了navEl的空值，那么我编写了一个小循环来执行类似的“任意命名空间属性选择器”，它使用了在IE10中工作的更传统的逻辑，并可能使用更低的版本：

if( !navEl )
{
   var navs = navHtml.getElementsByTagName( 'nav' );
   for( var i = 0; i < navs.length; i++ )
   {
      for( var j = 0; j < navs[i].attributes.length; j++ )
      {
         if(
            navs[i].attributes[j].nodeName.match( 'type$' ) == 'type' &&
            navs[i].attributes[j].value == 'toc'
         ) {
            navEl = navs[i];
            break;
         }
      }
   }
}

它不是超级漂亮或干净，但它明白了重点。很容易将其转换为一个函数，这样您就可以搜索任何属性/值，而不是硬编码type和toc，但就我当前的目的而言，这就足够了。