是否可以僅更改select元素中第一個選項的字體顏色

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元素，它們是具有類select2-results__option li元素一個帶有select2-results__options類的ul 。

所以：

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

更新了小提琴 ，或作為Stack Snippet：

 $(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進一步優化活動元素的樣式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>