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就是我用div = main应用于div的类。然后对于每个其他层，我想拥有Css类'bannerMain'中包含的内容，以及在其自己的特定类中为其定义的任何其他内容。在上面的示例中，我已将Css shadowBanner应用于id = withShadow

的div

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

我试图找出Css中的继承并尝试查看在常规Java或C＃世界中是否存在与继承的任何相似之处

Answer 1

当您编写一段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意图是什么。很乐意提供额外的帮助。

Answer 2

好的，我想我明白你现在想要的东西。请阅读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.

CSS继承正确的方式

2 个答案: