4

我在这里有一个我似乎无法弄清楚的问题，直到现在我的 css 有点草率，而且在看起来正确之前，它总是一个被破解的案例，但我决定正确地学习它，我尽可能地对事物进行分类。

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

现在我为这些容器中的每一个都有一个类，它们可以称为 container_1 container_2 等等。

现在它们每个都有一些独特的属性，但它们也遵循一组样式，例如，每个 li 中的 div 是并排的，因此它的两个 div 集也都将具有圆角。

所以我想我可以创建一个类rounded_corners加上float_left和float_right，这样我就可以像这样引用东西类，而不是重新输入代码来圆角或浮动一些东西：

.container_1 .rounded_corners .float_left
{

}
 .container_2 .rounded_corners .float_right
{

}

但是当我使用它时，我失去了我的样式，所以我使用了一个逗号，这允许 sty;ing 让 div 回来，但角落和浮动不起作用。

那么我在哪里错了呢？

这是我的代码，我已经删除了破坏布局的代码，但是如果您删除注释，您可以看到会发生什么。

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

命名有点不同，但你会知道是什么意思。

谢谢。

4

3 回答 3

16

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应该如何呈现 a 会更好。

它可能适用于您或不适用（取决于您的偏好、品味和开发环境），但您可以看看LESS。它被实现为将解析您的 CSS 的 JavaScript。当然，您不会编写一个纯粹有效的 CSS，但您会获得许多新功能。在您的情况下，您可能会发现mixins是您所需要的：

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

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

.container
{
    .rounder-corners
    .float-left
}
于 2012-10-24T14:58:14.677 回答
0

你可以有这样的 CSS 代码：

.container_1 {

}
.rounded_corners {

}
.float_left {

}

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

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

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

于 2012-10-24T14:56:44.177 回答
0

如果我做得好，你想要一组类应用于每个 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>

ETC...

于 2012-10-24T15:00:58.713 回答