Вопрос Как применить два схожих стиля css на одной странице?

Сломал себе всю голову! Выручайте.

Суть такова:

Фотографии используемые на сайте, их стиль и показ прописаны в основном файле CSS.

Так как сайт - интернет магазин с большим количеством товаров мне необходимо на главной странице сделать ротацию товаров с описанием.

Для этого я использую код со ссылкой на товары, прикрепляя фотографии.

На главной странице я внедрил одну ротацию товаров через css, но мне необходимо дополнить главную страницу схожими товарами, но в другом дизайне.

При добавлении еще одного css я получаю конфликт стилей.

<iframe> не подходит, да и если я присваиваю класс вышестоящему <div> конфликт не прекращается.

Как, надеюсь, вы понимаете свойства одинаковые и тот-же img с классом kartinka и img с классом risunok (это к примеру) начинают свой конфликт, который ссылается на рабочую css .peizaj

________________________-

Не судите строго, с самого утра ломаю голову может немного не связно написал. Да и полностью код выложить не могу, приведу примеры

_________________________________ .wsk-cp-img img{

width:100%;

height: 300px;

transition: all 0.2s ease-in-out;

border-radius:6px;

} конфликтует с: .product-sidebar {

width: 100%;

height: 50px;

bottom: 0px;

left: 0;

top: inherit;

@include prefix(border-radius, 0 0px 2px 2px);

@include prefix(transition, bottom .3s ease);

} и конфликтует с: .gphoto, .smiles img {

max-width: inherit;

} Везде все обозвано по разному.



____________________________________________________________-

А ТЕПЕРЬ ВОПРОС:



Как мне на одной странице полностью исключить конфликт схожих CSS? Как назначить файлу CSS (к примеру https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css) ограниченную зону действия ( к примеру в одном div)

Прочитал не полностью. Просто поставь новый класс и все

В файле с приоритетными стилями добавь !important всем свойствам. Это заставит игнорировать любые другие стили и классы.

Для того, чтобы применить два схожих стиля CSS на одной странице, можно использовать различные методы.

Использовать специфичность селекторов: Если вы хотите, чтобы один стиль CSS был применен только к определенному элементу, вы можете использовать более специфический селектор. Например, если у вас есть два класса .kartinka и .risunok, которые конфликтуют, вы можете использовать более конкретный селектор, такой как #mydiv .kartinka и #mydiv .risunok, где #mydiv - это id элемента, который вы хотите стилизовать.

Использовать отдельные классы: Вы также можете добавить отдельный класс для элементов, которые должны иметь другой стиль. Например, вы можете добавить класс .new-style для элементов, которые должны иметь другой стиль, и определить этот стиль в своем CSS файле.

Использовать стили встроенного CSS: Если вы хотите применить стиль только к определенному элементу, вы можете использовать встроенный CSS стиль в теге элемента. Например, вы можете добавить атрибут style к вашему тегу <img> и задать стиль напрямую.

Чтобы назначить файлу CSS ограниченную зону действия, вы можете использовать специфичность селекторов или добавить класс к определенному элементу, который должен быть ограничен стилем из этого файла CSS. Например, вы можете добавить класс .font-awesome к вашему <div> элементу, и затем использовать этот класс в вашем файле CSS, чтобы определить стили для этого элемента. В результате стили из файла CSS будут применяться только к элементам с этим классом.

Добавляй в нужное правило !important и это правило должно быть после того правила, которое оно перебивает.