使用css属性选择器更改所选选项的颜色？

Question

我知道如何通过在（更改）的情况下在typescript中编写一些代码来实现这一点，但我想知道这个css代码无法工作的原因是什么：

select[value="green"]{
  color:green;
}
select[value="red"]{
  color:red;
}

和html示例：

     <select class="custom-select">
        <option selected value="green" >my green option</option>
        <option value="red" >my red option</option>
     </select>

注意：我不是指下拉菜单中的文字颜色，而是选择空间中文字的颜色

Answer 1

因为你应该对CSS使用option元素，而不是select（它的父元素）：

option[value="green"]{
  color:green;
}
option[value="red"]{
  color:red;
}

<select class="custom-select">
  <option selected value="green" >my green option</option>
  <option value="red" >my red option</option>
</select>