Question

我有这个样本：

代码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>

CODE CSS：

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

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

有可能这样做吗？我尝试了上面的代码但不起作用。你能告诉我出了什么问题吗？

提前致谢！

Answer 1

我在代码段中进行了更改。请检查一下。

这是你想要的方式吗？

＆＃13;

$(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")
    }
  })
})

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

试试这个：

select:first-child{color: red;}

Answer 3

使用nth-of-type（1）

option:nth-of-type(1)
{
   color: red;
}

Answer 4

好好假设。

我认为您希望<option value="visa">Visa</option>颜色为红色，但请注意这是第二个选项，所以请使用此css

select.select-full option:nth-child(2){
  color:red;
}

小提琴链接：https://jsfiddle.net/yudi/L439rrsd/

如何为选择中的第一个项目着色？

4 个答案: