Question

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

<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与我们的选择/复选框绑定

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

2 个答案: