:第一个孩子选择所有元素

时间:2019-08-19 11:30:32

标签: html css bootstrap-4

只需要选择select标签中的第一个选项,并为其赋予不同的颜色即可。

:first-child:first-of-type:nth-of-type

HTML

<div class="input">
 <select>
  <option value="" selected disabled>Your interests</option>
  <option value="" >Test</option>
  <option value="" >Test</option>
 </select>

CSS

.input select:first-child
{
    color: gray;
}

需要将仅第一个选项标签的字体颜色设置为灰色。 使用第一个孩子将继续选择所有选项标签,并为它们赋予所有相同的灰色。 如果有必要,请使用引导程序4。

1 个答案:

答案 0 :(得分:2)

您需要将CSS应用于option而不是select

.input select option:first-child
{
  color: gray;
}
<div class="input">
  <select>
    <option value="" selected disabled>Your interests</option>
    <option value="" >Test</option>
    <option value="" >Test</option>
  </select>
</div>