继承自另一个css类

Question

我有一个问题,我似乎无法弄明白,直到现在我的css已经有点邋to了,它总是一个黑客的情况,直到它看起来正确,但我已经决定正确学习它,我是试图尽可能多地对事物进行分类.

所以我的布局有一个无序列表,这个列表有三个li标签,每个li标签中都有两个div.

现在我为每个容器都有一个类,它们可以被称为container_1 container_2,依此类推.

现在他们每个人都有一些独特的属性,但他们也遵循一套设定的风格,例如,每个li中的div是并排的,所以它的两个div组也都会有圆角.

所以我想我可以创建一个类class rounded_corners加上float_left和float_right,所以不要重新键入代码来围绕玉米或浮动一些我可以像这样引用事物类:

.container_1 .rounded_corners .float_left
{

}
 .container_2 .rounded_corners .float_right
{

}

但是,当我使用这个时,我放松了我的造型,所以我使用逗号,这允许麦粒肿;让div回来但角落和花车不起作用.

那我在哪里错了？

这是我的代码,我已经取出了破坏布局的代码,但如果你删除了注释,你可以看到会发生什么.

http://jsfiddle.net/ragebunnykickass/g3Zaz/

命名有点不同,但你会知道它是什么意思.

谢谢.

Answer 1

CSS类不能继承,因此您需要做的就是将它们拆分为尽可能多的原子.例如,如果您有一个圆角类,它可能适用于容器:

.rounded-corners
{
   /* Your CSS to define rounded corners */
}

请注意,您只定义圆角的属性.现在让我们假设您有一个样式容器的类(例如,使用适当的填充):

.container
{
    /* Your CSS to define a nice container */
}

如何将它们组合在一起？这不会在CSS中完成,但在HTML中,在此示例中,它<div>继承自:container和rounded-corners:

<div class="container rounded-corners">
</div>

现在假设你需要一个非容器对象的圆角:

<div class="rounded-corners">
</div>

这就是CSS的工作原理.不要将它们(因为名称)与面向对象语言的类进行比较.每个类定义一组属性,这些属性将应用于属于该类的所有元素.最终元素样式是从元素所属的每个类继承的属性的组合.

注意:总结:答案是肯定的,您可能需要重复一些代码.如果您使用类作为样式的短名称,您将无法管理代码(HTML和CSS):您会发现您错过了将内容与样式分开的要点(因为在HTML中您将定义,使用类似rounded-corners,明确的外观).想象一下:下个月你必须改变你的网站风格和时尚要求强加你有方角.您必须更改HTML代码(除非您接受使用rounded-corners类来应用平方边框).如果您只是说container并且让CSS定义(并知道)container应该如何呈现,那就好多了.

它可以适用于你或没有(这取决于你的喜好,品位和开发环境),但你可以看看到LESS.它是作为一个解析你的CSS的JavaScript实现的.当然你不会写一个纯有效的CSS,但你会获得许多新功能.在您的情况下,您可能会发现mixins是您所需要的:

.rounded-corners
{
    /* Your CSS here */
}

.float-left
{
    /* Your CSS here */
}

.container
{
    .rounder-corners
    .float-left
}