gpt4 book ai didi

html - CSS 选择器 - 选择所需选择的第一个选项

转载 作者:行者123 更新时间:2023-11-28 16:26:04 26 4
gpt4 key购买 nike

获取所需选择的第一个选项的正确 (CSS3) 方法是什么? (即我不希望此规则适用于选择不需要的元素)。我试图避免为每个必需的元素添加一个类。

示例:我只想为 fontSize 元素选择“请选择”选项,但为 fontColor 选择“请选择”选项。

编辑:

我希望所有必需的选择都表现得像这样,并且非必需的选择的所有选项都是黑色的。

enter image description here

测试:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
/* Have also tried select:first-child:required but this selects all the options in a required select */
option:first-child:required
{
color: #FF0000 !important;
}
</style>
</head>
<body>
<select required name="fontSize">
<option value="">Please select</option>
<option value="9">9 px</option>
<option value="10">10 px</option>
<option value="11">11 px</option>
<option value="12">12 px</option>
<option value="13">13 px</option>
<option value="14">14 px</option>
<option value="15" selected="">15 px</option>
<option value="16">16 px</option>
</select>

<select name="fontColor">
<option value="">Please select</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
</body>
</html>

最佳答案

要为必需的select 设置第一个option 的样式,我会简单地使用attribute selector。 , 其次是 :first-child pseudo-class .

select[required] option:first-child {
color: red;
}
<select required name="fontSize">
<option value="">Please select</option>
<option value="9">9 px</option>
<option value="10">10 px</option>
<option value="11">11 px</option>
<option value="12">12 px</option>
<option value="13">13 px</option>
<option value="14">14 px</option>
<option value="15" selected="">15 px</option>
<option value="16">16 px</option>
</select>

<select name="fontColor">
<option value="">Please select</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>

关于html - CSS 选择器 - 选择所需选择的第一个选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44769300/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com