为什么选择 css查询：checked，但是HTML和Javascript使用的是selected？

Question

您可以从<select>中获取所选的选项，但是如果您有<select multiple>，则需要使用所选的选项动态地执行某些操作。

您可以查询选择：checked，也可以选择所有选项并过滤.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

根据early drafts of Selectors 3，:checked最初是在2000年左右被提议为:selected。但是，该草案的修订版实际上并未包含:selected的定义，因此我只能猜测它是在进入之前被提议为:selected草稿为:checked。