Почему для работы этого стиля списка выбора требуется селектор CSS :invalid?

Я полагаю, что ваше замешательство вызвано рядом недоразумений. Ваше понимание селектора CSS с запятой, означающей «или-или», верно, но я думаю, что это единственное, что вы поняли правильно.

Во-первых, элементы option и элемент select — это две разные вещи; то, что вы видите в раскрывающемся списке, — это элемент <select>, а не выбранный в данный момент элемент <option>... чтобы просмотреть элементы <option>, вам нужно активировать элемент выбора, чтобы отобразить параметры... обратите внимание, как вы видите значение элемента выбора и такое же значение, как один из вариантов, когда вы это делаете?

Во-вторых, селектор CSS для вашего первого раскрывающегося списка — .select1 option[value = ""]. Это стилизация только опции, а не самого выбранного элемента. Если вы нажмете на первый выбранный элемент, а затем наведете курсор на параметры «Яблоко» или «Банан», вы увидите, что параметр «Выбрать фрукт» неактивен. Повторяю, выделено серым цветом... потому что это то, к чему говорит ваш селектор, чтобы применить стиль.

Во втором раскрывающемся списке есть тот же селектор (но для .select2) ... что означает, что параметры по-прежнему будут выделены серым цветом, где это необходимо. Но у него также есть .select2:invalid, первая часть кикера. .select2:invalid применяется к элементу <select>, а не к опциям... и возникает всякий раз, когда выбранная в данный момент опция является недопустимой.

Как он узнает, какие из них недействительны, — это вторая часть кикера: у вас есть атрибут required на втором элементе <select>, но не на первом. Поскольку на втором элементе есть required, он знает, что он «недействителен», если только у него не выбран параметр с непустым значением.

Я также, вероятно, должен объяснить в этот момент, что значение <option> — это то, что по умолчанию находится в атрибуте value = ""; если атрибут value = "" не объявлен, то используется содержимое элемента <option>. Таким образом, значения для вашего рабочего раскрывающегося списка: empty, Apple и Banana. Недопустимое значение empty, потому что в раскрывающемся списке установлен атрибут required.

Подводя итог, как вы, возможно, были близки к открытию, нужны и селектор .select2:invalid, и .select2 option[value = ""], но не только это; вам также нужен атрибут required в элементе <select>, чтобы оба этих селектора на основе проверки работали.

В вашем первом варианте выбора цвет серый, но когда он отображается в выборе, потому что выбранный цвет черный, он показывает черный цвет

.select1,
.select1 option[value = ""]{
  color: #999999;
}

дайте как значение select, так и option значение цвета, который вы хотите, и ваш вариант дает другой цвет, подобный этому. Это решит вашу проблему

.select1 option{
  color: black;
}

/* fails */
.select1,
.select1 option[value = ""]{
  color: #999999;
}

.select1 option{
  color: black;
}


/* works */
.select2:invalid,
.select2 option[value = ""] {
  color: #999999;
}

<div>Fails:</div>
<select class = "select1">
  <option value = "" selected>Select a fruit</option>
  <option>Apple</option>
  <option>Banana</option>
</select>
<br/><br/>

<div>Works:</div>
<select class = "select2" required>
  <option value = "" selected>Select a fruit</option>
  <option>Apple</option>
  <option>Banana</option>
</select>