CSS / HTML дети переопределяют родителей?

Question

С учетом следующего кода:

<div id="bla">
    <p class="blubber">Johnny Bananas</p>
</div>

и стиль заголовка этого HTML-документа:

<style>
    div#bla{background:yellow}
    p.blubber{background:purple}
</style>

Почему ребенок будет окрашен в фиолетовый цвет и наложит его на своего родителя?

Answer 1

Свойство background по умолчанию не наследуется детьми. Поэтому стиль фона div#bla не применяется к p.blubber, и p.blubber может указывать свой собственный цвет фона независимо от его родителя и независимо от специфики.

И поскольку background не наследуется, на самом деле переопределения не происходит.

Answer 2

Поскольку специфичность одинакова, правило будет применяться к элементу p. Если вы удалите p и просто наберете .blubber, это не сработает.

Кроме того, дети не могут переопределить родителей, поэтому, если бы было больше контента, вы бы увидели желтый цвет вокруг p (добавьте отступ к div).

Цвет фона не является и наследуется в CSS.

Answer 3

При использовании нескольких таблиц стилей таблицы стилей могут бороться за контроль над определенным селектором. В этих ситуациях должны быть правила относительно того, какое правило таблицы стилей победит. Следующие характеристики будут определять исход противоречивых таблиц стилей.

ознакомьтесь с разделом каскадного заказа - http://htmlhelp.com/reference/css/structure.html