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

看看Chris你误解了CSS选择器及其继承......

Russ Weakly

没有什么能比这个演示文稿更好地解释它

CSS Cascade

CSS继承无法按预期工作

2 个答案: