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

【问题标题】：CSS3 Selectors [*|type="toc"]CSS3 选择器 [*|type="toc"]
【发布时间】：2013-12-24 01:40:17
【问题描述】：

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

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

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

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

将该行更改为：

var navEl = navHtml.querySelector('nav')

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

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

【问题讨论】：

请注意，querySelector() 只能返回零或一个元素，而不是“全部”（除非无论如何只有一个）。

标签： javascript css css-selectors internet-explorer-10 selectors-api

【解决方案1】：

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

<nav foo:type="toc">

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

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

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

【讨论】：

确实很奇怪——浏览器应该能够处理这个选择器，因为没有要解析的命名空间。见w3.org/TR/selectors-api/#resolving-namespaces
这正是我一直在寻找的，而且，果然，我尝试加载的一些示例 epub 具有像 <nav epub:type="toc"> 这样的 XML，因此将其关闭并不是一个真正的选择。我会用 IE10 做一些实验，看看发生了什么。感谢您提供信息和 W3 资源。
@MrSlayer 试试nav[epub|type=toc], nav[type=toc]怎么样？
@Explosion Pills：第一个不起作用，因为epub|需要解决，这不能在querySelector()内完成，第二个不会像你说的那样起作用在你自己的答案中。
我能找到的唯一信息在这里：msdn.microsoft.com/en-us/library/cc288326(v=vs.85).aspx#names——但那是指 IE8。我相信 NSResolver 指的是| 语法。问题可能会转移到 IE10。

【解决方案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，但就我目前的目的而言，这就足够了。

【讨论】：