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

Question

[lychak_vlad]

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

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

скриншот

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

скриншот

И я не могу переписать, потому что по наследству подключенный swiper выше и мои стили зачеркиваются и не используются.

Answer 1

[Mizutsune]

Если это касается именно 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 */ };

Comments

[lychak_vlad]

Спасибо большое!
Ваш вариант помог

Answer 2

[Алексей]

Можете использовать !important

.class {
    color: red !important;
}

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

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

Comments

[lychak_vlad]

Спасибо!
Да, на счет !important знаю
Но интересно было разобраться в самой сути проблемы