CSS HTML Selector против Селектора Класса

Question

Здравствуйте, Я видел странное поведение при использовании селектора CSS HTML и селектора класса. в файле HTML у меня есть этот код:

<div class="content">
    <h1>Registration Form</h1>
</div>

И в файле Css у меня есть:

.content
{
    margin:auto;
    width:600px;
    border:solid 1px black;
    background-color:White;
    padding:10px;
}

h1
{
    color:Gray;
    font-size:18px;
    border-bottom:solid 1px orange;
}

Над кодом работает отлично. Когда я изменил h1 HTML-селектор на Селектор класса, написав .h и h1 class="h", все равно он работал отлично.

НО когда я изменил .content селектор класса на div (т.е. я конвертировал селектор класса тега div в DIV HTML селектор САМ), тогда вывод изменился. Он вообще не показывал мне текст Регистрационной формы и показывал горизонтальные линии выше и ниже области, где будет присутствовать текст Регистрационной формы. почему это странное поведение?

Доказывает ли это, что селектор класса и HTML-селектор ведут себя по-разному, даже если они применяются с эффектом ТОГО ЖЕ стиля?

Answer 1

Селектор класса более специфичен, чем селектор типа.

Когда вы изменяете селектор типа на селектор класса, первый селектор по-прежнему имеет приоритет, просто потому, что он стоит первым.Когда вы меняете первый селектор класса на селектор типа, второй селектор становится более конкретным и имеет приоритет.