Итак. Есть 2 выпадающих меню.
Первый код css
* {
outline: 0;
font-family: sans-serif
}
body {
background-color: #fafafa
}
И второй код
body {
background: #2a2a2b;
color: #fff;
text-align: center;
font-family: Arial, Helvetica;
}
Допустим это все пишется в файл style.css, применяется и получается конфликт c тегом body и применяется это ко всему сайту. Как сделать, чтобы стили применялись только к этим элементам и не конфликтовали между собой?
Здесь нет никакого конфликта.
Когда для одного и того же элемента есть несколько CSS-правил с одинаковыми свойствами, браузер использует понятия приоритетов и специфичности, чтобы выбрать значение свойства из нескольких возможных.
В данном случае применятся свойства, которые в коде стоят ниже, поскольку специфичность селекторов одинаковая.
Чтобы стили применялись только конкретным элементам – назначайте им классы.
1 лайк
Да, спасибо, уже понял в чем ошибка моя была…