Css 属性访问特定的 selectInput 并使初始元素加粗

Question

给定的 html 脚本创建三个 selectInputs 并将所有三个 selectInputs 的第一个元素更新为黑色和粗体。我只想更改第三个 selectInput Box 而不是其他两个。请帮助我使用适当的 css 属性来实现此目的。

<!DOCTYPE html>
<html>
<body>
<style>
option:first-child{
font-weight:bold;
color:#000000;
}
</style>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</select>
<select>
<option value="a1">Volvo1</option>
<option value="a2">Saab1</option>
</select>
<select>
<option value="v1">Volvo2</option>
<option value="v2">Saab2</option>
</select>
</body>
</html>

Answer 1

您可以在 css 中使用 nth-child 到 select 特定的 select 标签，并像您一样将其第一个选项设为粗体.

select:nth-child(3) option:first-child{
font-weight:bold;
color:#000000;
}

请参阅下面的代码笔

See this pen

Answer 2

给第三个select一个class.

<select class="third">
<option value="v1">Volvo2</option>
<option value="v2">Saab2</option>
</select>

编辑css:

.third option:first-child{
font-weight:bold;
color:#000000;
}

Css 属性访问特定的 selectInput 并使初始元素加粗

Css attribute to access a specific selectInput and make the initial element bold

html

css

shiny

shinydashboard