Css属性访问特定的selectInput并使初始元素变为粗体 [英] Css attribute to access a specific selectInput and make the initial element bold

查看:211
本文介绍了Css属性访问特定的selectInput并使初始元素变为粗体的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

给定的html脚本创建三个selectInputs,并将所有三个selectInputs的第一个元素更新为黑色和粗体。我只想对第三个selectInput Box进行更改,而不是其他两个。

 <!DOCTYPE html> 
< html>
< body>
< style>
选项:第一个孩子{
font-weight:bold;
颜色:#000000;
}
< / style>
< select>
< option value =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>


解决方案

您可以在css中使用 nth-child 来选择特定的选择标签,并将其第一个选项设置为粗体。
$ b

  select:nth-​​child(3)选项:first-child {
font-weight:bold;
颜色:#000000;
}

请参阅下面的codepen

查看此笔


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>

解决方案

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

这篇关于Css属性访问特定的selectInput并使初始元素变为粗体的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆