Css 样式选项组标签

是否可以在下拉选择器中仅设置optgroup标签的样式

<select>
    <optgroup label="Group Name">
        <option>My option</option>
    </optgroup>
</select>

我的选择

optgroup[标签]{
背景：#FFFFFF；
}

或

optgroup[label=“Group Name”]{
背景：#FFFFFF；
}

如果希望它是特定于标签的。

使用属性选择器

[label]
{
color: red;
}

编辑

<select>
<optgroup label="Cars">
<option>Honda</option>
<option>Merc</option>
</optgroup>
<optgroup label="Bikes">
<option>Kawasaki</option>
<option>Yamaha</option>
</optgroup>
</select>


optgroup[label="Cars"]
{
color: red;
}

optgroup[label="Bikes"]
{
color: blue;
}

option
{
color: black;
}

本田
美塞苔丝
川崎
雅马哈
optgroup[label=“Cars”]
{
颜色：红色；
}
optgroup[label=“Bikes”]
{
颜色：蓝色；
}
选项
{
颜色：黑色；
}

我知道这条线有点旧，但为了防止有人像我一样偶然发现它。。。 已经提到，在设置optgroup标记的样式时，它会设置整个组的样式。这是正确的，但如果单独设置选项标记的样式，则optgroup格式将保持在样式中设置的格式，但作为optgroup子选项的选项的样式格式将覆盖在未为该选项设置样式时继承的optgroup格式

因此，为optgroup设置以下css样式将为您提供灰色背景上的红色文本

optgroup {
    background-color: gray;
    color: red;
}

如果没有其他操作，整个列表将是灰色背景上的红色文本。但是，如下所示设置选项样式将使optgroup标签的样式为红色和灰色，但组下的选项将为黑色和白色

option {
    background-color: white;
    color: black;
}

---

在任何地方使用

[标签]

都是不相关的。不能将样式应用于HTML属性。它只是一个用于过滤

optgroup

元素的修饰符。如果您所有的

optgroup

都有

标签

，则您仍将选择所有标签，如果一些没有

标签

，则他们将选择退出样式：

optgroup[标签]{
颜色：红色；
}

本田
美塞苔丝
不贴标签
也不贴标签
川崎
雅马哈

这只是一个例子。使用更具体的选择器。正如你所说，这将影响整个团队。要解决此问题，请使用“选项{color:black；}将选项{color:black；}重置为”选项{color:black；}。这将覆盖OptGroup上设置的样式一些CSS属性，如

边框

，仅当

的

大小

属性大于1时才会呈现。我预计会出现这种情况，因为当大小>1时，select的内容将永久呈现到页面上，但当大小=1时（或未指定-select的正常情况），仅当单击select时才会呈现内容。在这种情况下，

和

都会忽略一组CSS属性，包括边框和边距。（在Chrome Windows上进行了测试。这将在移动设备上再次完全不同）。

optgroup {
    background-color: gray;
    color: red;
}

option {
    background-color: white;
    color: black;
}