CSS选择器-选择所需选择项的第一个选项
[英]CSS selector - Select first option of required select
问题描述
What is the proper (CSS3) method for grabbing the first option of a select that is required. 
什么是正确的（CSS3）方法，用于获取所需的选择的第一个选项。 (ie I don't want this rule to apply to select elements that are not required). （即我不希望该规则适用于选择不需要的元素）。 I am trying to avoid adding a class to each required element. 我试图避免将类添加到每个必需的元素。
Example: I want only the Please select option selected for the fontSize element, but not the Please select option for fontColor. 示例：我只希望为fontSize元素选择“请选择”选项，而不要为fontColor选择“请选择”选项。
Edit: 编辑：
I want all required selects to behave like this, and non-required selects to have all their options be black. 我希望所有必需的选择都具有这种行为，而非必需的选择则使其所有选项均为黑色。
Test: 测试：
<!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>
3 个解决方案
解决方案1
1 2017-06-26 22:02:45
Edit: I misunderstood the question. 编辑：我误解了这个问题。
You can do it using nth-type selector or first-child selector. 您可以使用第n个类型的选择器或第一个子选择器进行操作。
Pass a class to the select tag. 将一个类传递给select标签。
<select class="sel" 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="fontSize"] option:first-child {
background: red;
}
or 要么
select[name="fontSize"] option:nth-child(1) {
background: red;
}
解决方案2
1 已采纳 2017-06-26 22:11:17
To style the first option of a required select , I would simply use an attribute selector , followed by the :first-child pseudo-class . 要设置必需select的第一个option的样式，我只需使用属性选择器 ，然后使用:first-child伪类 。
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>
解决方案3
0 2017-06-26 22:02:07
Assuming you are trying to target the first select element with CSS, what you are looking for is the :first-of-type pseudo-selector: 假设您尝试使用CSS 定位第一个select元素，那么您正在寻找的是：first-of-type伪选择器：
select:first-of-type { 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>
If instead you are looking to target the first option of the first select box, you can chain the pseudo-selectors: 相反，如果您希望定位第一个select框的第一个选项 ，则可以链接伪选择器：
select:first-of-type option:first-of-type { 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>
This will only style the 'Please select' of the first select box ( fontSize ), leaving the 'Please select' of fontColor unmodified. 这只会设置第一个选择框（ fontSize ）的'Please select' fontColor ，而fontColor的'Please select' fontColor 。
Based on your edit , you can target the first option of any required select field by using the square brackets [required] attribute selector in conjunction with the :first-of-type pseudo-selector. 根据您的编辑 ，可以通过使用方括号[required] 属性选择器以及:first-of-type伪选择器，将任何必需 select字段的第一个选项作为目标。
select[required] option:first-of-type { 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>
Hope this helps! 希望这可以帮助！ :) :)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.