Стройный JavaScript В стиле

#svelte #svelte-3

Вопрос:

В моем компоненте стиля у меня есть класс, который изменяет цвет фона кнопки следующим образом:

 <style>
.button:global(:nth-child(2)) {
    background-color: red;
  }
</style>
 

Моя проблема в том, что я не хочу, чтобы n-й ребенок был жестко закодирован, я бы хотел, чтобы это была переменная, как показано ниже.

 <script>
let x = 5
</script>

<style>
.button :global(:nth-child(x)) {
    background-color: red;
  }
</style>
 

Возможно ли это вообще?

Комментарии:

1. Я не собираюсь превращать это в ответ, кто-то другой может, но вот первый результат по DuckDuckGo для «гибких переменных в теге стиля»: svelte.школа/учебные пособия/… , и, похоже, это то, что вам нужно

Ответ №1:

Нет, это невозможно, единственное, что можно использовать атрибут style для задания свойств (или пользовательских свойств) элемента, но они не могут использоваться в качестве аргумента для nth-child