Question

我必须将下拉列表文本中的第1个值设为粗体。我尝试使用ng-class属性，因为用户界面是在angularjs中开发的，但未获得成功。现在，我正在尝试使用第一个子选择器css。我尝试了以下样式。

1)
select#ad-version-select.form-control : first-child {
  font-weight: bold;
}

2)
select#ad-version-select.form-control >: first-child {
  font-weight: bold;
}

但以上款式。没用。如果我使用

select#ad-version-select.form-control {
            font-weight: bold;
        }

下拉列表中的所有值都变为粗体。如何只将下拉列表中的第一个值显示为粗体？我无法使用javascript或jquery。请帮我css。

Answer 1

试试这种方式

select#ad-version-select.form-control option:nth-child(1){
    font-weight:bold;
}

Answer 2

你应该尝试这样 -

select#ad-version-select.form-control option:first-child {
  font-weight: bold;
}

<select name="" id="ad-version-select" class="form-control">
  <option value="">option</option>
  <option value="">option</option>
  <option value="">option</option>
  <option value="">option</option>
</select>

Answer 3

select#ad-version-select.form-control option:nth-child(1) {
  font-weight: bold;
}

将完成这项工作，但它仅适用于Firefox，而不适用于Google Chrome或Safari。

Answer 4

实际上你不能加粗选项。

突出显示或加粗的唯一方法是将其设为选项组

<select>
    <optgroup label="Label Group">
       <option value="label value 1">Label 1</option>
       <option value="Label value 2">Label 2</option>
     </optgroup>
     <optgroup label="Label Group 2">
       <option value="label value 3">Label 3</option>
       <option value="label value 4">Label 4</option>
     </optgroup>
</select>

你可以在这里试试W3Schools

在下拉列表中加粗第一个值

4 个答案: