CSS继承的正确方法

我正试图遵循CSS中的继承来工作。这是公认的答案，所以我认为它是这样工作的。我不想让div层像这样使用多个类（除非这是正确的方法）来完成工作

 <div class="bannerMain ShadowBanner" >
        This div is with class bannerMain that also has shadowBanner properties
 </div>

此div具有bannerMain类，该类也具有shadowBanner属性

什么有什么问题？使用banner main的div应该位于顶部，而使用shadow main的div应该位于底部，因为我使用的是

bottom:50px那里。此外，只有ShadowBanner类的div应该有阴影，因为它是在ShadowBanner类中定义的

编辑

我想做的是有一个Css类，它具有应用于页面上所有div层的基本外观。在本例中，bannerMain就是这样一个类，我已经将它应用于id=main的div。然后，对于每个其他层，我希望Css类“bannerMain”中包含的内容，以及在它自己的特定类中为它定义的任何其他内容。在上面的示例中，我已将Css shadowBanner应用于id=withShadow的div

最终结果将是“main”div显示为没有阴影和背景色，“withShadow”div显示为具有黑色背景和阴影，以及shadowBanner Css类中为其分配的剩余属性，同时继承
display:block和
文本对齐：居中来自父Css类“main”

我试图找出Css中的继承，并试图看看在常规Java或C#world中观察到的继承是否有相似之处，当您编写一段Css时，如：

.bannerMain, .bannerNotification {/*some style*/}

您告诉浏览器.bannerMain和.bannerNotification都要在下面的语句中使用CSS。因此，您应该只包含应该由这两个元素共享的样式元素。您需要创建单独的css部分来指定特定元素特有的样式。您希望执行以下操作：

CSS

.bannerMain, .bannerNotification {/*shared style elements*/}

.bannerMain {/*bannerMain unique style elements*/}
.bannerNotification{/*bannerNotificationunique style elements*/}

顺便说一句，不清楚你的意图是什么。我很乐意提供额外的帮助
 好吧，我想我现在明白你想要什么了。请阅读michiganfootball20的答案。当你这样做的时候，你必须意识到

.bannerMain, .shadowBanner{styles here}

bannerMain和shadowBanner都将使用这些属性。所以你说你想在bannerMain和shadowBanner之间共享一些属性。你把那些放在那里。如果您想要特定于shadowbanner的样式，比如阴影和背景，您将只将它们放在shadowbanner类中

不要把它看作是继承，只把它看作是共享属性。我认为这就是你感到困惑的地方，因为我认为你试图把事情弄得太复杂了，而实际上不需要这么复杂

请看这把小提琴，如果你还有其他问题，请告诉我

否决选民请解释否决投票或评分接近的原因。嘿，你能再解释一下这个问题吗？你到底想让每个部门做什么？嗨，布兰登，很抱歉之前不太清楚。我已经更新了我的问题。这个问题很小，有一个完整的问题描述和一个在JSFIDLE附件中不起作用的可验证示例，在第一次否决投票后立即更正，这让我意识到我放错了链接。足以让两个人理解并正确回答。请不要在没有给出原因的情况下将问题标记为关闭，因为问题出了什么问题。这和在问题陈述中说“它不起作用”一样离题，也无助于让未来的帖子变得更好。是的，这个问题相当令人困惑。我不确定他想把什么样的风格应用到哪个部门。我想他可能误解了遗产继承，因为他把另一个答案联系了起来。嗨，伙计们，很抱歉之前不清楚。我已经更新了我的问题，我正试图实现什么。我意识到在对JSFIDLE链接进行更改后，我忘记了更新它。