@lychak_vlad

Как работает наследственность стилей в этом случае?

От чего зависит порядок наследства стилей в этом случае и как его поменять/переписать?

Мне нужно чтобы последовательность была такая, чтобы я мог переписать стиль и позицию кнопок в Swiper:

скриншот

63387a295f9fc324340527.png


А у меня получается вот так:

скриншот

63387ac8ba623169397210.png


И я не могу переписать, потому что по наследству подключенный swiper выше и мои стили зачеркиваются и не используются.
  • Вопрос задан
  • 51 просмотр
Решения вопроса 1
mizutsune
@mizutsune
Simplicity is the ultimate sophistication.
Если это касается именно Swiper, то решается это дело без !important и других лишних действий. Достаточно указать для кнопок управления слайдером кастомные селекторы и назначить нужные стили:

new Swiper('.swiper', {
  navigation: {
    nextEl: '.my-awesome-slider-button-next',
    prevEl: '.my-awesome-slider-button-prev',
  },
});


.my-awesome-slider-button-prev { /* ...styles */ };
.my-awesome-slider-button-next { /* ...styles */ };
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
SPART4K
@SPART4K
Middle Front-end Developer (Vue.js/Nuxt.js)
Можете использовать !important
.class {
    color: red !important;
}

Или в другом случае подключать локальные стили ниже уровнем чем стили библиотеки
То-есть в таком порядке
1: Стили библиотеки
2: Ваши стили в вашем файле
Сначала применяются стили в первом подключении а далее следующий файлом они перезаписываются

В целом использовать !important не очень хорошая практика, можно обращаться точнее по селектору, но иногда приходится
https://codernet.ru/articles/web/kak_pereopredelit...
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
30 нояб. 2022, в 07:23
1000 руб./за проект
30 нояб. 2022, в 00:04
1000 руб./за проект