Как назначить разные цвета кнопкам категорий в блогролле Wordpress - PullRequest
Новая
       30

Как назначить разные цвета кнопкам категорий в блогролле Wordpress

0 голосов
/ 06 мая 2020

Как назначить разные цвета кнопкам отдельных категорий, которые автоматически отображаются под заголовком сообщения в блоге? Что-то вроде кнопок разных цветов на этом блоге .

Я вижу, что в блоге выше каждая категория имеет свой идентификатор:

  • категория 1: .pgafu-post-Categories a: nth-child (4n + 1)
  • категория 2: .pgafu-post-Categories a: nth-child (4n + 2)
  • категория 3: .pgafu-post-Categories a: nth-child (4n + 3)
  • ... и так далее ...

Любой новой категории назначается другой div, и ему было бы легко CSS контролировать цвет каждой идентификации.

Но с темой, которую мы используем, есть только один идентификатор для всех кнопок категорий:

  • категория 1 : .element_4 a
  • категория 2: .element_4 a
  • категория 3: .element_4 a
  • ... и так далее ...

Следовательно, какой бы цвет ни был назначен этой идентификации через CSS, цвет автоматически применяется ко всем кнопкам категорий. Нет никакой дифференциации.

Как мне сделать так, чтобы каждая категория получала другой div / идентификатор? Заранее благодарим.

Наш новый блог все еще в разработке, но вы можете просмотреть его здесь .

1 Ответ

0 голосов
/ 06 мая 2020

Трудно предоставить конкретное c решение, поскольку вы не предоставили свой фактический html, но вы можете использовать псевдоселектор nth-of-type(), который позволяет стилизовать разные экземпляры одного и того же элемента

Также обратите внимание, что псевдоселектор nth-child относится к элементу, который является заданным дочерним элементом чего-либо, поэтому, если все ваши элементы являются дочерними элементами данного родительского div или другого элемента, вы все равно можете настроить таргетинг на них с помощью обычного nth-child () псевдоселектор. 

button{
 color: white
}

button:nth-of-type(1) {
 background: red
}

button:nth-of-type(2) {
 background: blue
}

button:nth-of-type(3) {
 background: green
}

button:nth-of-type(4) {
 background: black
}
<button class="element_4a" type="button"> Button 1</button>
<button class="element_4a" type="button"> Button 2</button>
<button class="element_4a" type="button"> Button 3</button>
<button class="element_4a" type="button"> Button 4</button>
...