Css 如何在R selectizeInput组标题中设置字体颜色？

我想给selectizeInput选项中的组名上色。下拉列表中的“水果”应始终为橙色，而“年份”应为绿色

我在网上找到了很多方法，但我还是不太明白。附加的是一个例子闪闪发光的应用程序改编自

library（googleVis）
shinyApp(
ui=fluidPage(
标签$head(
标签$style（HTML（“
。选择下拉内容[数据值=\“水果\”]{
颜色：橙色！重要；
}
。选择下拉列表内容[数据值=\“年\”]{
颜色：蓝色！重要；
}
"))
)，uiOutput（“type”），
服务器=功能（输入、输出、会话）{
输出$type解决方案
很接近了。请将此用于css：

.optgroup[data-group=\"Fruit\"] .optgroup-header {
    color: orange !important;
}

（对于要着色的任何其他组标题也是如此。）

为什么有效
以下是为下拉列表生成的html片段：

<div class="selectize-dropdown-content">
    <div data-group="Fruit" class="optgroup">
        <div class="optgroup-header">Fruit</div>
        <div data-value="Apples" data-selectable="" class="option">Apples</div>
        <div data-value="Apples" data-selectable="" class="option">Apples</div>
        <div data-value="Apples" data-selectable="" class="option">Apples</div>
        <div data-value="Oranges" data-selectable="" class="option">Oranges</div>
        <div data-value="Oranges" data-selectable="" class="option">Oranges</div>
        <div data-value="Oranges" data-selectable="" class="option">Oranges</div>
        <div data-value="Bananas" data-selectable="" class="option">Bananas</div>
        <div data-value="Bananas" data-selectable="" class="option">Bananas</div>
        <div data-value="Bananas" data-selectable="" class="option">Bananas</div> 
   </div>
        <div data-group="Year" class="optgroup"><div class="optgroup-header">Year</div>
        <div data-value="2008" data-selectable="" class="option">2008</div>
        <div data-value="2008" data-selectable="" class="option">2008</div>
        <div data-value="2008" data-selectable="" class="option">2008</div>
...


果
苹果
苹果
苹果
橘子
橘子
橘子
香蕉
香蕉
香蕉
年
2008
2008
2008
...

实际持有选项组标签的div具有class
optgroup头
，但它是一级以上的div（属于class
optgroup
）它具有消除歧义的
数据组
属性。因此，例如，我们需要指定
optgroup
div的
optgroup头
子级，其中
数据组
是
水果
，应该有橙色文本

<div class="selectize-dropdown-content">
    <div data-group="Fruit" class="optgroup">
        <div class="optgroup-header">Fruit</div>
        <div data-value="Apples" data-selectable="" class="option">Apples</div>
        <div data-value="Apples" data-selectable="" class="option">Apples</div>
        <div data-value="Apples" data-selectable="" class="option">Apples</div>
        <div data-value="Oranges" data-selectable="" class="option">Oranges</div>
        <div data-value="Oranges" data-selectable="" class="option">Oranges</div>
        <div data-value="Oranges" data-selectable="" class="option">Oranges</div>
        <div data-value="Bananas" data-selectable="" class="option">Bananas</div>
        <div data-value="Bananas" data-selectable="" class="option">Bananas</div>
        <div data-value="Bananas" data-selectable="" class="option">Bananas</div> 
   </div>
        <div data-group="Year" class="optgroup"><div class="optgroup-header">Year</div>
        <div data-value="2008" data-selectable="" class="option">2008</div>
        <div data-value="2008" data-selectable="" class="option">2008</div>
        <div data-value="2008" data-selectable="" class="option">2008</div>
...