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

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

如果要基于所选选项设置select内容的样式，则不能仅使用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. 您还可以使用option元素上的:first-child selector来实现此目的：

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

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