javascript - 是否可以仅更改选择元素中第一个选项的字体颜色

Question

使用 Select2js 插件，是否可以只更改 select 元素中第一个选项的字体颜色？

我试过了……

select option:first-child { color:red; }

和

$(function() {
    $("select option:first-child").addClass("red");
});

.red { color:red; }

示例:

$(function() {
    $("select").select2();
  $("select option:first-child").addClass("red");
});

.red {color: red;}
select option:first-child {color: red;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js"></script>
<select>
  <option>Text 1</option>
  <option>Text 2</option>
  <option>Text 3</option>
</select>

Answer 1

如果您右键单击 select2 选项并选择“Inspect”(或“Ins​​pect Element”，取决于您的浏览器)，您会看到它们不是 option 元素，它们是在 ul 类 select2-results__options 中重新 li 类 select2-results__option 元素。

所以:

.select2-results__options li.select2-results__option:first-child {
  color: red;
}

Updated Fiddle ，或作为堆栈片段:

$(function() {
  $("select").select2();
  $("select option:first-child").addClass("red");
});

.select2-results__options li.select2-results__option:first-child {
  color: red;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<select>
  <option>Text 1</option>
  <option>Text 2</option>
  <option>Text 3</option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.js"></script>

如果您愿意，您可以使用 select2-results__option--highlighted 类进一步优化事件元素的样式，该类在元素“事件”时添加。例如，这里我将它设为蓝色，当它不活动时，当它是红色时:

$(function() {
  $("select").select2();
  $("select option:first-child").addClass("red");
});

.select2-results__options li.select2-results__option:first-child {
  color: blue;
}
.select2-results__options li.select2-results__option.select2-results__option--highlighted:first-child {
  color: red;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<select>
  <option>Text 1</option>
  <option>Text 2</option>
  <option>Text 3</option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.js"></script>