问题
the given html script creates three selectInputs and updates the first element of all the three selectInputs black and bold. I just want to make the change to the third selectInput Box and not the other two. Please help me with an appropriate css attribute to achieve this.
<!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>
回答1:
You can use nth-child in css to select particular select tag and make its first option as bold like u did.
select:nth-child(3) option:first-child{
font-weight:bold;
color:#000000;
}
see the codepen below
See this pen
回答2:
Give the third select a class.
<select class="third">
<option value="v1">Volvo2</option>
<option value="v2">Saab2</option>
</select>
edit css:
.third option:first-child{
font-weight:bold;
color:#000000;
}
来源：https://stackoverflow.com/questions/48514038/css-attribute-to-access-a-specific-selectinput-and-make-the-initial-element-bold