Дайте элемент привязки без стиля, специфичного для класса - PullRequest
Новая
       11

Дайте элемент привязки без стиля, специфичного для класса

0 голосов
/ 12 марта 2019

Я действительно изо всех сил пытаюсь найти способ стилизовать каждую ссылку категории в другой цвет.

Итак, я создаю пост с 3 тегами категории, например ‘Еда’, ‘напиток’ и ‘веселье’

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

Когда я проверяю элемент, он показывает: <a href="http://localhost/domain/?cat=19" rel="category">food</a> для еды и <a href="http://localhost/domain/?cat=20" rel="category">drink</a> для питья.

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

Большое спасибо

1 Ответ

0 голосов
/ 12 марта 2019

Существуют различные решения для придания элементам без класса индивидуального стиля. Одним из них является подсчет дочерних элементов через их родителя. Как это выглядит?

CSS 

.post-categories > li:first-child > a {
    color: red;
}

.post-categories > li:nth-child(2) > a {
    color: blue;
}

Таким образом, для первого потомка используйте псевдоселектор :first-child an для каждого следующего :nth-child(#), где вы добавляете число для #.

Другое решение заключается в следующем: 

a[href="http://localhost/domain/?cat=19"] {
    color: red;
}

a[href="http://localhost/domain/?cat=20"] {
    color: blue;
}

Однако, это требует от DOM больше поиска по вашей странице, проверяя каждую привязку на соответствие href. Первый подход удобнее для пользователя.

...