Html/css урок 28. почему так оформляются стили для заголовков?

html код:

<div class="main">
        <div class="header">
            <div class="logo">
                <div class="logo-text">
                    <h1><a href="#">КиноМонстр</a></h1>
                    <h2>Кино - наша страсть!</h2>
                </div>
            </div>
        </div>
    </div>

css код:

.logo h1, .logo h2 {
    font: normal 300% 'century gothic', arial, sans-serif;
    margin: 0 0 0 9px;
}
.logo-text h1, .logo-text h1 a, .logo-text h1 a:hover {
    padding: 22px 0 0 0;
    color: #fff;
    letter-spacing: 0.1em;  /*Задает интервал между символами*/
    text-decoration: none;  /*Убираем подчеркивания у ссылки*/
}
.logo-text {
    font-size: 0.9em;
    padding: 4px 0 0 0;
    color: #999;
}

Вопрос:

Заголовки h1 и h2 находятся внутри дива с классом logo-text. Этот див вложен в другой див с классом logo.

Почему свойство font для этих заголовков задается именно в диве с классом logo, а цвет и размеры между элементами задаются в том диве, в котором заголовки непосредственно расположены?

html

css

2 ответов

Вопрос не в том, "Как задавать", тем более про наследственность и каскадность понятно из самой сути css, а "почему" свойства, относящиеся к определенному элементу, раскидываются по разным частям кода. Логичнее было бы собрать их в одном селекторе. Отсюда и возник вопрос почему делается так.

Я бы добавил к курсу для более подробного понимания принцип правильного использования дивов, как оберток

Как угодно можно задавать, в любом классе, хоть через последовательность div и классов, типа: header>div>span>img.back