如何在选择选项上应用CSS选择器子项

问题描述：

我只想在选择选项子值上应用css选择器。我有一个id应用在选择器上。现在，我想在孩子1名儿童2适用不同的CSS等等等等如何在选择选项上应用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？

只是简单地'＃select_81选项{}'或相似。你也可以使用'nth-type-type'选择器来选择特定的选择。话虽如此，选项下拉式不能真正被称呼太多。你通常必须将这种风格应用于'

我想申请不同的CSS不同的孩子请再次阅读问题 –

喜欢这个？ https://jsfiddle.net/7c7q2ghe/ – Aeolingamenfel

答

那是因为你在做.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) {} 
...

但你真的不能风格选择下拉菜单中的选项;系统通常给它默认样式，你不能改变。

哦，现在为什么以及我们如何改变这种情况？ –

@geekone您无法更改选项值的样式。但是，使用'-webkit-appearance：none'将仅删除选择下拉列表中的所有默认浏览器样式**。请参阅https://jsfiddle.net/ans5zhmz/。 –

答

大多数浏览器不会让您在默认的<select>下拉菜单上做很多样式。这就是为什么像Select2这样的图书馆存在的原因。关于造型下拉菜单

如何在选择选项上应用CSS选择器子项

相关推荐