Как стилизовать каждый вариант в select для использования другого шрифта (с использованием структуры materialize css)

Question

• 1000 но это не остается и сбрасывается при обновлении браузера.
идентификатор создается автоматически и выглядит так:

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

Вещи, которые я пробовал

1. Использование другого класса / идентификатора для каждого параметра и стилизовать его в css с помощью! important, но это не отменяет стиль по умолчанию.
2. Использование классов .dropdown-content, .select-dropdown, но этот стиль не индивидуален
3. Использование .select-dropdown li>span это также стиль всего в выбранном

Answer 1

ваниль JS раствор ( демонстрация )

<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 2

@ kushal Это сработало, спасибо .. теперь я понял .. Я нацелил элемент span после каждого nth-child

.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

Answer 3

Вы можете использовать это в своем css

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

Здесь вы можете использовать основной класс как префикс, например, если вы используете тег абзаца, который вы можете использовать, например

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

Здесь ребенок - это число, поэтому в вашем списке первый элемент - это первое число, как будто вы можете его расположить ... !!

Надеюсь, вы получите немного искры от этого ... !!

Сообщите мне, сработало ли это ... !!