如何设置 select 中每个选项的样式以使用不同的字体（使用 materialize css 框架）

Question

我想为 select 中的每个选项设置样式，以便在 materialize css 框架中使用不同的字体系列 this img url 中显示我通过使用检查元素获得的 id 对每个选项进行样式化来实现这一点，但是当浏览器刷新时它不会保留并重置
id 是自动生成的，看起来像这样

li#select-options-5ea35c39-e3ba-6859-c611-43359ab710b32{
font-family: 'Homemade Apple', cursive !important;
font-size: 25px;}

我尝试过的东西

在每个选项上使用不同的 class/id 并在 css 中使用 !important 对其进行样式设置，但这不会覆盖默认样式。
使用.dropdown-content, .select-dropdown类但是这个风格整体不个性
使用 .select-dropdown li>span 这也会为 select

Answer 1

您可以在 css

中使用它

:nth-child(number) {
  css declarations;
}

在这里你可以使用主 class 作为前缀，如果你使用的是段落标签，你可以使用 like

p:nth-child(2) {
  background: red;
}

这里的 child 是数字，所以在您的列表中，第一项是第一个数字，您可以明智地安排它...!!

希望你能从中得到一些火花...!!

让我知道它是否有效...!!

Answer 2

普通 JS 解决方案 (demo)

<ul>
    <li id="select-options-123">cursive</li>
    <li id="select-options-456">fantasy</li>
    <li id="select-options-789">monospace</li>
</ul>

<script> 
  var selector = "li[id*='select-options-']";
  document
    .querySelectorAll(selector)
    .forEach(el => el.style.fontFamily = el.textContent);
</script>

Answer 3

@kushal 成功了，谢谢..现在我明白了..我在每个第 n 个子节点之后定位了 span 元素

.select-dropdown>li:nth-child(2)>span{
font-family: 'Indie Flower', cursive;
font-size: 1.5em;
color: black;
}
.select-dropdown>li:nth-child(3)>span{
font-family: 'Dawning of a New Day', cursive;
font-size: 1.8em;
color: blue;
}

等等.. 这是结果 https://ibb.co/gvfMyWq

如何设置 select 中每个选项的样式以使用不同的字体（使用 materialize css 框架）

How do I style each option in select to use a different font (using materialize css framework)

html

css

materialize