Кроме того между селекторами есть ещё приоритеты на принятие правил. Разберём на примере меню:
<header class="page-header">
<h1 id="page-title" class="title">Пример меню в CSS</h1>
<nav>
<ul id="main-nav" class="nav">
<li><a href="/">Главная</a></li>
li><a href="/">Страница №2</a></li>
li><a href="/">Страница №3</a></li>
li><a href="/" class="featured">Страница "В разработке"</a></li>
</ul>
</nav>
</header>
Пока не указываем стили и на выходе имеем такое:
Пример меню в CSS
Далее добавляем CSS:
h1 {
color: #2f4f4f;
margin-bottom: 10px;
}
#main-nav {
margin-top: 20px;
list-style: none;
padding-left: 0;
}
#main-nav li {
display: inline-block;
}
#main-nav a {
color: white;
background-color: #13a4a4;
padding: 12px;
border-radius: 8px;
text-decoration: none;
line-height:50px;
}
.featured {
background-color: orange;
}
Пример меню в CSS
Пока остановим внимание на классе .featured и блоке Страница "В разработке", которая не перекрасилась в оранжевый цвет. По умолчанию, правило написанное последним — имеет больший приоритет, да не тут то было. В этой ситуации id имеет более высокий приоритет, причём ситуация не изменится, даже если вместо class="featured" написать id="featured", а в стилях прописать #featured, поскольку выбирая приоритет между двумя id, выбор падёт на тот, у кого рядом стоит ещё один тег (т.е. #main a).
Если рассматривать дерево приоритетов, то самый низкий приоритет у "тега", после этого идёт "класс", а после "id". Надо понимать, что правило прописанное двум классам будет иметь более высокий приоритет, чем правило, которое прописали трём тегам и одному классу. В нашей ситуации, если мы хотим перекрасить Страница "В разработке" в оранжевый, необходимо добавить #main-nav перед .featured.
Есть ещё одно, можно сказать «уникальное решение» для всех, кто не хочет заморачиваться с приоритетами использовать модификатор !important. Но если пользоваться им бездумно то мы снова окажемся ввязанными в «войну приоритетов».
Пример:
.featured {
background-color: orange !important;
}
