Блог

Главная - Вопросы по программированию - Применение класса css к первому изображению в моем массиве ngx-gallery-9

Применение класса css к первому изображению в моем массиве ngx-gallery-9

#html #css #angular #typescript #ngx-gallery

#HTML #css #угловой #typescript #ngx-галерея

Вопрос:

У меня здесь есть этот стекблит ngx-gallery-9, и я пытаюсь понять, как применить: первый по типу или n-й дочерний элемент (1) к значку ‘fa-star’ в галерее изображений.

Проблема — я хочу покрасить только 1-й значок шрифта ‘fa-star’ awesome в галерее. Итак, только 1-е изображение окрашено в желтый цвет.

Я пробовал несколько разных вещей, но все они, похоже, применяют css к каждому значку или ни к одному из значков, а не только к первому

пара вещей, которые я пробовал ниже, но безуспешно

 :host >>> ngx-gallery-action:first-of-type .fa-star:first-of-type {
      color: yellow;
}

:host >>> fa-star:first-of-type {
      color: yellow;
}

:host >>> .fa-star:nth-child(1) {
      color: yellow;
}

Ответ №1:

Не используйте nth-of-type для звезды, а для первого изображения (контейнера), затем звезды,.

Поскольку звезда всегда будет первой звездой в каждом контейнере..

https://stackblitz.com/edit/angular-bootstrap-4-starter-mttiqx?file=src/index.html

так что это будет:

 .ngx-gallery-image:first-of-type .fa-star { color:#fc0; }

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

1. можете ли вы предоставить мне ответ в моем stackblitz, чтобы убедиться, что он работает?

2. вы можете добавить класс с помощью инструмента inspector (F12), чтобы увидеть, что он работает, но я попробую это в stackblitz..

3. stackblitz.com/edit /… вот так-то

Ответ №2:

вы пробовали `nth-of-type’, так что что-то вроде этого:

 .fa-times-circle:nth-of-type(1) {
  display: none !important;
}

Редактировать: попробуйте этот код:

 .ngx-gallery-icons-wrapper > .fa-times-circle:nth-of-type(1) {
  display: none !important;
}

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

1. Я только что попробовал, и он по-прежнему скрывает все значки, а не только первый. Я думаю, это что-то связанное с библиотекой, скрывающей и показывающей изображения при их выборе.

2. @user1186050 каков класс вашего первого изображения? а также класс, который заключает ваши круги?

3. первое изображение имеет классы «ngx-gallery-image ngx-gallery-активный ngx-gallery-кликабельный ng-star-inserted», а класс, обертывающий значок, — «ngx-gallery-icons-wrapper»

4. @user1186050 Я обновил свой ответ. Пожалуйста, попробуйте новый код.

5. Это не сработало, но спасибо за помощь. Сейчас я собираюсь попробовать кое-что еще

Метки: