Конфликт стилей в style.css

Итак. Есть 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 лайк

Да, спасибо, уже понял в чем ошибка моя была…