javascript - 如何在第一个选项标签上应用斜体

Question

我需要应用一半的非斜体文本和另一半的斜体文本。
我需要做这样的事情:

我已经尝试了下面的代码，但似乎没有任何效果......有人能解决这个问题吗？

#mySelect *.firstOption i {
  font-style: italic;
}

<select id="mySelect">
  <option class="firstOption">not-italic <i>italic</i></option>
  <option>b</option>
  <option>c</option>
</select>

Answer 1

如果您想根据所选选项设置选择内容的样式，您不能只使用 CSS。

这是一个重复的问题:

• > Style <select> element based on selected <option>

如果您询问的是占位符文本，那就又不一样了。您可能需要发布一个片段，其中包括如何设置占位符文本和/或目标平台。

如果您只想为下拉列表中的第一个选项设置样式，那么您可以通过以下任一方式仅使用 css 来实现:

1. 删除星号 ( * ) 和 i从您的代码中选择器，它将起作用。 (我已经删除了明确的 <i> 标签，因为我认为这不是您想要的)。

#mySelect .firstOption {
  font-style: italic;
}

<select id="mySelect">
  <option class="firstOption">alpha</option>
  <option>beta</option>
  <option>gamma</option>
</select>

1. 您也可以使用 :first-child selector 来实现这一点在选项元素上:

option:first-child{
  font-style: italic;
}

<select id="mySelect">
  <option>alpha</option>
  <option>beta</option>
  <option>gamma</option>
</select>