querySelectorAll 的选择器不一致答案

【问题标题】：Inconsistent selector for querySelectorAllquerySelectorAll 的选择器不一致
【发布时间】：2014-05-18 09:24:41
【问题描述】：

在 JavaScript 中使用 :checked 选择器 document.querySelectorAll() 时，我发现存在不一致的行为。当:checked 选择器用于复选框或单选按钮时，它不需要冒号 (:) 前的空格，但当它用于选择选项时，它需要在它前面有一个空格。为什么会这样？

以下是示例：-

复选框：http://jsbin.com/fehonoho/1/edit?html,js,console

选择：http://jsbin.com/yasotuli/1/edit?html,js,console

【问题讨论】：

标签： javascript css-selectors selectors-api

【解决方案1】：

来自Selectors spec：

例如，:checked 伪类最初适用于具有 HTML4 selected 和 checked 属性的元素，如Section 17.2.1 of HTML4 中所述，但当然用户可以在在这种情况下，:checked 伪类将不再适用。

:checked 选择器前面的空格只不过是一个后代组合器，因此您拥有的选择器正在寻找 :checked 的选择的后代，而不是选择本身。这些后代是它的选项元素。

selected 属性位于选项元素中，而不是其父选择中。换句话说，一个选择永远不能匹配:checked 选择器；只有它的选项可以。这就是为什么你需要一个后代（或子）组合器才能工作，这与复选框和单选按钮不同。

为了更清楚地说明这一点，强烈建议您使用类型选择器限定 :checked 选择器（否则隐含通用选择器）：

document.querySelectorAll('[name="aname"] option:checked')

选择元素的属性选择器也是如此：

document.querySelectorAll('select[name="aname"] option:checked')

【讨论】：

【解决方案2】：

因为:checked 元素是<option> 而不是<select>，所以您需要option:checked 或select :checked，后者有descendant combinator。

demo

【讨论】：

【解决方案3】：

您误解了这个问题。这两个选择器的工作方式如下：

input[name="gender"]:checked

是一个简单的选择器。它选择一个input 元素，其属性为name=gender，并且是:checked。

[name="aname"] :checked

是由descendant combinator 分隔的两个简单选择器。它选择具有属性[name=aname] 的元素的子/大子元素的所有:checked 元素。

请注意，option 元素应使用 :selected 进行测试。

【讨论】：