如何在Select Option Child上应用CSS选择器

Question

我只想在选择选项子值上应用css选择器。 我在选择器上应用了一个ID。 现在我想对孩子1和孩子2应用不同的CSS，依此类推

<select name="options[81]" id="select_81" class=" required-entry product-custom-option">
    <option value="">-- Please Select --</option>
    <option value="229" price="0">ariel </option>
    <option value="230" price="0">times new roman </option>
</select>

现在我已经尝试了这些选择器，但没有任何效果

select#select_81.required-entry.product.custom-option:nth-child(2){
    font-family:'Arial';
}

select#select_81.required-entry.product.custom-option:nth-child(3){
    font-size:30px;
    font-weight:800;
}

#select_81.required-entry.product.custom-option:nth-child(3){
    font-size:30px;
    font-weight:800;
}

#select_81:nth-child(3){
    font-size:30px;
    font-weight:800;
}

select#select_81option:nth-child(2), option:nth-child(3) {
    font-weight:bold;
}

我们如何使用CSS做到这一点？

Answer 1

大多数浏览器不允许您在默认的<select>下拉菜单上进行很多样式设置。 这就是为什么存在像Select2这样的库的原因。

有关样式下拉菜单的更多信息： https : //css-tricks.com/dropdown-default-styling/

Answer 2

那是因为您正在执行.product.custom-option而不是.product-custom-option 。

但是您的代码不必那么复杂。

要回答您的问题，请使用:nth-child()选择器选择第n个选项：

select#select_81 option:nth-child(1) {}
select#select_81 option:nth-child(2) {}
select#select_81 option:nth-child(3) {}
select#select_81 option:nth-child(4) {}
select#select_81 option:nth-child(5) {}
...

但是您不能真正在选择下拉菜单中设置选项的样式。 系统通常会提供您无法更改的默认样式。