Question

我在这里遇到一个问题，我似乎无法弄清楚，直到现在我的css已经是一个小小的slapdash，它总是一个黑客的情况，直到它看起来正确，但我已经决定正确学习它我正试图尽可能地对事物进行分类。

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

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

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

所以我想我可以创建一个类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
}

Answer 2

您可以使用以下CSS代码：

.container_1 {

}
.rounded_corners {

}
.float_left {

}

然后以这种方式将类设置为HTML元素：

<div class="container_1 rounded_corners float_left">...</div>

所以DIV元素将继承每个类的每个风格！显然，DIV只是一个例子，你可以使用每个标签！

Answer 3

如果我做得好，你想要一组课程适用于每个div？

我会这样分解：

CSS

.rounded_corners {}
.float_left {}
.float_right {}
.container {}

并在html中

<li id="container_1" class="container float_left rounded_corners">...</li>
<li id="container_2" class="container float_right rounded_corners">...</li>

等...

继承自另一个css类

3 个答案: