Question

我只想在select选项子值上应用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。

但是你的代码并不需要那么复杂。

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

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) {}
...

但是您无法在选择下拉菜单中设置选项样式;系统通常会给出默认样式，你无法改变。

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

2 个答案: