Почему css-свойство не вступает в силу?

Question

Почему в первом варианте элемент 'h1' отображается, а во втором нет, если оба варианта ведут к одному и тому же элементу???

html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="position.css">
        <link rel="stylesheet" href="js_position.css">
    </head>
    <body>
        <div class="div">
            <h1 class="cont">I'm position</h1>
        </div>
    </body>
</html>

Вариант 1

position.css

.div > h1 {
    display: block;
}

js_position.css

.cont {
    display: none;
}

Вариант 2

position.css

.cont {
    display: block;
}

js_position.css

.cont {
    display: none;
}

Answer 1

В первом варианте, элемент h1 отображается, потому что правило стиля в файле position.css более специфично, чем правило стиля в файле js_position.css. Конкретное правило .div > h1 указывает на элемент h1, который является потомком элемента с классом div. Таким образом, это правило имеет более высокий приоритет и переопределяет правило .cont из файла js_position.css.

Во втором варианте, элемент h1 не отображается, потому что в файле js_position.css правило .cont имеет такой же приоритет, как и в файле position.css, но оно переопределяет его, устанавливая display: none. Как результат, элемент h1 с классом cont остается скрытым.

БЛОГ НА HUSL

Почему css-свойство не вступает в силу?

Ответы (1 шт):