Наследование CSS не работает должным образом

Question

Итак, у меня есть HTML и CSS, которые выглядят следующим образом ..

    <div id="foo">
        <p> Foo text </p>
        <div id="bar">
            <p> Bar text </p>
        </div>
    </div>

А затем у меня есть некоторые CSS, которые выглядят следующим образом ...

    #foo p {
    text-align:left;
    font-family: helvetica, verdana, sans;
    font-size: 14px;
    color: #000000;
    padding: 10px 10px 10px 10px;
    margin: 0px 0px 0px 0px;
    }
    #bar p {
    font-size: 12px;
    color: #ffffff;
    padding: 0px 0px 0px 0px;
    }

не является ли смысл CSS переопределять стили, примененные к дочернему элементу из родительского foo?Это не делает этого, я просто получаю дочерние стили, переопределенные родителем.Я явно упускаю что-то большое здесь, любая помощь будет отличной.

Answer 1

Я думаю, вы смущены или закодировали себя слепым.:) То, что у вас есть, работает отлично, я подозреваю, что ваши намерения отключены.Вы думаете, что первый набор стилей должен быть унаследован, а затем перезаписан вторым, но если вы посмотрите на свой HTML, это не та структура, которую вы создали.

Вы говорите, что #foo's <p>'s должен иметь первый стиль, но второй набор стилей находится в <div>, и, следовательно, не применяется.Второй p находится в <div>, и, следовательно, не будет иметь первых правил, которые относятся к элементам в <p>.

Если вы хотите, чтобы стили наследовали, оберните ваш <div> в ваше <p> (хотя структурно не хорошо, и не действует в ряде схем);

<div id="foo">
        <p> Foo text 
        <div id="bar">
            <p> Bar text </p>
        </div>
    </p>
</div>

Я не уверен, что вы пытаетесь сделать, так что этоНемного сложно найти хорошие примеры для решения вашей проблемы.:)

Answer 2

Слушай, Крис, ты неправильно понимаешь селекторы CSS и их наследование ...

Ничто не сможет объяснить это лучше, чем эта презентация Russ Weakly

CSSCascade