为什么"font-weight"适用于"select"元素的选定"option"，而"color"则不适用于？

Question

我想更改所选"选项"；"；选择"；元素，但当我使用"；颜色"；属性的整个列表；选项"；而不仅仅是所选择的一个；字体重量"；，它只适用于选择的"；选项"；而不是"；选项"；。那为什么呢？以及我如何只改变"；选项"；正在被选择并出现在"；选择"；要素

select option:checked {
color: red;
}
select {
font-weight: bold;
color: blue;
}

<select>
<option>Something 1</option>
<option>Something 2</option>
<option>Something 3</option>
<option>Something 4</option>
<option>Something 5</option>
<option>Something 6</option>
<option>Something 7</option>
<option>Something 8</option>
<option>Something 9</option>
</select>

正如你所看到的，我尝试使用伪类"检查"；，但这样做的目的是使所选择的"；选项"；不同的颜色，但仅在"；选项"；，而当它出现在"；选择"；要素

"；font weight:bold"仅适用于选定的"；选项"；，但正如你所看到的；颜色"；适用于整个列表。

Answer 1

您必须通过添加选项规则来指定每个选项的颜色：

select option:checked {
color:red;

}

select {
font-weight:bold;
color:red;
}

option{
color:blue;
}

<select>
<option>Something 1</option>
<option>Something 2</option>
<option>Something 3</option>
<option>Something 4</option>
<option>Something 5</option>
<option>Something 6</option>
<option>Something 7</option>
<option>Something 8</option>
<option>Something 9</option>
</select>

Answer 2

您可以为选项指定颜色规则，而父选择保持自己的颜色规则。我认为这应该解决你的问题：

select {
color: blue;
}
option {
color: green;
}