CSS继承的正确方式[关闭]

Question

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

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

I am doing here 有什么问题？使用banner main 的div 应该在顶部，而使用shadow main 的div 应该在底部，因为我在那里使用bottom: 50px;。此外，只有 ShadowBanner 类的 div 应该有阴影，因为它在 ShadowBanner 类中定义。

编辑

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

最终结果将是“主” div 显示为没有阴影且没有背景颜色，而“withShadow” div 显示为具有黑色背景并具有阴影以及在 shadowBanner Css 类中分配给它的其余属性从父 Css 类 "main" 继承 display: block; 和 text-align:center;

我正在尝试找出 Css 中的继承，并尝试查看在常规 Java 或 C# 世界中观察到的继承是否有任何相似之处

Answer 1

好的，我想我现在明白你想要什么了。请同时阅读 michiganfootball20 的回答。做的时候一定要注意

.bannerMain, .shadowBanner{styles here}

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

不要将其视为继承，只需将其视为共享属性。我认为这是您感到困惑的地方，因为我认为您在不必要的时候试图让它变得过于复杂。

如果您有任何其他问题，请看看这个小提琴，让我知道。

I have updated your fiddle for you to look at if you click this line.

Answer 2

当你写一段 CSS 时：

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

您是在告诉浏览器 .bannerMain 和 .bannerNotification 都将在以下语句中使用 CSS。因此，您应该只包含应该由这两个元素共享的样式元素。您需要创建单独的 css 部分来指定特定元素独有的样式。你想做这样的事情：

CSS

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

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

P.s，它有点不清楚你的 jsFiddle 的意图是什么。很乐意提供额外的帮助。