为什么被选中<option value="css-queried with:checked, but the HTML and Javascript is using selected?"> css-queried with:checked，但是 HTML 和 Javascript 使用的是选中的？</option>

Question

您可以从<select>中获取所选选项，但如果您有<select multiple>并且您需要对所选选项进行动态操作。

您可以查询选择：已选中，或者您可以 select 所有选项并过滤.selected

有人可以解释这种不一致吗？

 function run() { let optionChecked; let optionSelected; try { optionChecked = document.querySelector("option:checked"); } catch (e) {} try { optionSelected = document.querySelector("option:selected"); } catch (e) {} console.log('selector: option:checked: ', optionChecked) // chosen option console.log('selector: option:selected: ', optionSelected) // undefined console.log('js-property: option.checked: ', optionChecked.checked) // undefined console.log('js-property: option.selected: ', optionChecked.selected) // true }

 /* * never used. */ option:selected { color: brown; } /* * Even tho not supported - when inspecting the element, we see the css-selector match */ option:checked { color: hotpink; }

 <h2>Example</h2> <select name="" id="select1"> <option value="a">a</option> <!-- Invalid --> <option value="b" checked>b</option> <!-- Valid --> <option value="c" selected>c</option> <option value="d">d</option> </select> <button onclick="run()">run</button>

Answer 1

根据Selectors 3 的早期草案， :checked最初是在 2000 年左右被提议为:selected的。但是，草案的修订版实际上没有包含:selected的定义，所以我只能猜测它是在进入草案之前被提议的:selected :checked 。

由于它被指定应用于 HTML 中的checked属性和selected属性（可能是因为它们在一个表单中都用于相同的目的），因此不需要两个伪类意味着相同的东西。 另外，目标是将选择器与 HTML 分离，因此为这个伪类使用一个唯一的名称是理想的。 无论出于何种原因，在决定给这个伪类取什么名字时，规范的作者都选择了:checked 。 我浏览了 1999 年至 2000 年的 www 风格的邮件列表档案，遗憾的是找不到任何公开讨论这个决定的内容。

.checked和.selected DOM 属性简单地反映了它们的 HTML 属性同名，并且与选择器中的任何内容无关。 这就是为什么你会发现.checked属性只出现在HTMLInputElement中； 和.selected ，仅在HTMLOptionElement中。

jQuery 包含一个:selected伪类，它基本上是一个 JavaScript 重新实现:checked仅适用于option元素。 随心所欲，但我建议忽略它。 我只是将其作为琐事提及。