html - 如何为选择中的第一项着色？

Question

我有这个样本:

link

代码 HTML:

<select name="card_type" id="card_type" class="select-full">
    <option value="">Select</option>
    <option value="visa">Visa</option>
    <option value="mastercard">Mastercard</option>
    <option value="discovery">Discovery</option>
    <option value="maestro">Maestro</option> 
</select>

代码 CSS:

select
{
   color: #ccc;
}
option
{
   color: #000;
}
option:first-child
{
   color: red;
}

我希望只发现并选择列表中的第一项。例如，第一个元素为红色，另一个元素为灰色。

有没有可能做到这一点？我试过上面的代码但不起作用。你能告诉我哪里出了问题吗？

提前致谢!

Answer 1

我已经对代码段进行了更改。请检查。

这是你想要的吗？

$(document).ready(function(){
  if($(this).val() == 0){
      $('select').css("color","red");
    }
    else{
      
      $('select').css("color","#000")
    }
  $('select').change(function(){
    
    if($(this).val() == 0){
      $('select').css("color","red");
    }
    else{
      
      $('select').css("color","#000")
    }
  })
})

select
{
   color: #ccc;
}
option
{
   color: #000;
}
option:first-child
{
   color: red;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="card_type" id="card_type" class="select-full">
    <option value="0">Select</option>
									    <option value="visa">Visa</option>
									    <option value="mastercard">Mastercard</option>
									    <option value="discovery">Discovery</option>
									    <option value="maestro">Maestro</option>
								</select>