Почему element.classname используется, когда кажется, что classname делает то же самое?

Question

Почему эти типы селекторов используются, когда элемент p указан с именем класса (для выбора всех элементов p с именем класса colort)

p.colort {
    background-color: blueviolet;
}
<p class="colort">this is a test</p>

Когда этот тип селектора кажется сделать то же самое? (указав класс и назначив его всем p элементам, которым я хочу назначить)

.back_color{
    background-color: blueviolet;
}
<p class="back_color">this is a test</p>

Какая разница, по которой я скучаю?

Answer 1

p является селектором элемента. .colort является селектором класса. Вы можете иметь много разных элементов с классом .colort . Чтобы получить указанный c элемент, вы не можете использовать p.colort

Хотя p.colort имеют больший вес, чем .colort . Если вы будете использовать оба в коде - система выполнит p.colort с более высоким приоритетом.