Как добавить больше цветов в карусель изображений elementor

Я хочу попросить вас о помощи. Я создаю wp-сайт с elementor (я не знаю, как кодировать), и я хотел бы добавить разные цвета к границам изображений или к тексту подписей к изображениям. Поддержка не поможет мне с css ...

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

selector img { border: 5px solid red; }

но я хотел бы добавить 6 изображений с 6 разными цветовыми рамками или с разными цветами подписей к изображениям. (не знаю, какой CSS использовать)

На вкладке custom css написано следующее:

Используйте селектор для целевого элемента оболочки. Примеры:

selector {color: red;} // For main element
selector .child-element {margin: 10px;} // For child element
.my-class {text-align: center;} // Or use any custom selector

Спасибо

Гарик


image carousel css elementor
person Garik    schedule 21.10.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Это можно сделать несколькими разными способами, но селектор - это не настоящий элемент, поэтому может быть сложно определить, что именно нужно. Например, селектором должен быть элемент HTML, такой как div.

Вы можете: 1: искать идентификаторы этих изображений (# my-id) или 2: искать определенные имена классов (.my-class,. Означает, что это класс) для этих изображений (если они есть) 3 : используйте псевдоселектор, например first-child, last-child, nth-child

Давайте рассмотрим второй вариант, поскольку он ближе к лучшей практике:

  1. вам понадобится общее правило CSS, такое как правило селектора изображения, но у нас не будет цвета.
div img { border: 5px solid; }

// Below would be better because the above looks at ALL images in a div tag ... So that can turn into ... all images on a page.

.container-class-name img { border: 5px solid; }

Все изображения в div будут иметь сплошную границу 5 пикселей. По умолчанию он будет черным без следующей части.

  1. Теперь об отдельных изображениях. Допустим, у каждого есть класс с image- {number}, поэтому эти классы будут такими, как image-one, image-two и т. Д.
.image-one { border-color: red; }
.image-two { border-color: blue; }
.image-three { border-color: yellow; }

Шестнадцатеричные цветовые коды лучше, чем использование браузерных, таких как красный, синий, желтый и т. Д. Если вы не знаете, что это такое, я настоятельно рекомендую прочитать их.

Когда дело доходит до CSS, вы должны быть как очень общими, так и конкретными, и знать, где нужно использовать каждую идею.

person Alex    schedule 21.10.2020
comment
Спасибо, но это не работает. Границы появляются только с селектором img. Я хотел бы использовать его как img1, img2, img3, это правильно, но этот код не работает. - person Garik; 22.10.2020
comment
Я нашла класс. Когда я использую селектор .swiper-slide-image {border: 5px сплошной красный; } он добавляет границы ко всем изображениям. Класс работает так же, как если бы я использовал селектор img. Проблема в том, что я не знаю, как напрямую выбрать первое, второе, третье ... изображение в классе с css. - person Garik; 22.10.2020
comment
Поддержка, помоги мне, это работает, если кто-то хочет добавить границы в базовую галерею .gallery-item: nth-child (1) img {border: 5px; стиль границы: сплошной; цвет границы: rgb (153 204 255); } - person Garik; 15.11.2020