CSS继承工作不正常

所以我有HTML和CSS，看起来像下面..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应用到子项的样式？它不是这样做的，我只是得到父类覆盖的子样式。我显然在这里错过了一些大事，任何帮助都会很棒。

来源

2011-06-26 Chris

更好除非我误解你的问题，它似乎为我工作得很好：http://jsfiddle.net/interdream/sYMdR/ –

具体是什么问题？ #bar p中的填充，颜色和字体大小肯定不同。这是什么不工作？ –

如果您希望其他样式（即保证金，字体家族等）被重置以及您错误，您需要说：margin：继承此 –

我觉得你很困惑，或者自己盲目编码。 :)你有什么完美的工作，这是你的意图，我怀疑是关闭。你在想的是第一组样式应该被继承，然后被第二组样式覆盖，但是如果你看看你的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>

我不知道你正在尝试做，但什么，所以这是一个有点难以拿出好的例子来解决你的问题。 :)

来源

2011-06-26 23:24:04 AlexanderJohannesen

我完全不明白你的目标是什么，但我们不知道他的意思:)我会密切关注对话！ –

-1

看看克里斯你误会CSS选择器及其继承...

什么都不会解释它比这个演示由Russ Weakly

CSS Cascade

来源

2011-06-26 23:34:27

CSS继承工作不正常

回答

相关问题