Почему последнее свойство CSS перекрывается :nth-child?

Question

[Maks]

Есть такая структура:

<section>
  <div>
    <button>Text</button>
  </div>
</section>

И к ней применен следующий CSS:

section >div:nth-child(1) button {
  border: 2px solid black;
}
button {
  border: none;
}

Почему не срабатывает стирание границы от button? Данное свойство же стоит последним.
Если убрать nth-child(1) - то border:none заработает.

Answer 1

[Андрей Б.]

Последнее правило не самое главное, есть еще понятие специфичности селекторов, почитайте.
border none сработает только если специфичность одинаковая.

Если убрать nth-child(1) - то border:none заработает.

Обманываете.

Comments

[Maks]

Разобрался, спасибо.