如何更改特定div选项选择的字体颜色?

Question

如何将ID为"order"的选项选择的第二个子项更改为绿色？我在下面的代码适用于所有选项选择，根据我的需要，这是不可取的。这可行吗？

<style>
select option:nth-of-type(2){
color: green;
}
</style>
<select id="order"/>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</select>
<select id="type"/>
<option value="">A</option>
<option value="">B</option>
<option value="">C</option>
</select>

Answer 1

您可以执行此操作并手动分配 CSS 类

option.colored {
color: red;
}

<select>
<option>Option 1</option>
<option class="colored">Option 2</option>
<option>Option 3</option>
</select>

或者你可以这样做，让每个 ：n 项在特定列表中着色

.coloredOption option:nth-child(2n+2) {
color: red;
}

<select class="coloredOption">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
<option>Option 6</option> 
</select>

Answer 2

如果要自定义任何类型的复选框(包括选择/选项(。我们通常会创建看起来像我们想要的div，并在 JavaScript 的帮助下将此div 与我们的选择/复选框绑定