Html 从另一个 css 类继承

inheriting from another css class

提问by ragebunny

I have a problem here that i can't seem to figure out, till now my css has been a little slapdash and it was always a case of hack away till it looks right but i've decided to learn it properly and i'm trying to categorize things as much as i can.

我在这里有一个我似乎无法弄清楚的问题，直到现在我的 css 一直有点草率，而且它总是一个黑客攻击的情况，直到它看起来正确但我决定正确学习它，我尝试尽可能多地对事物进行分类。

So i have a layout that has an unordered list, this list has three li tags, within each of these li tags are two div each.

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

Now i have a class for each of these containers, they can be called container_1 container_2 and so on.

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

Now they have some unique attributes to each of them but they al also follow a set style for example, the divs in each li are side by side so its sets of two divs also they are all going to have round corners.

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

So i thought i could make a class class rounded_corners plus float_left and float_right so instead of re typing the code to round the corns or float something i could just reference thing class like this:

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

.container_1 .rounded_corners .float_left
{

}
 .container_2 .rounded_corners .float_right
{

}

But when i use this i loose my styling so i used a comma and this allowed the sty;ing for the div to come back but the corners and floats didn't work.

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

So where am i going wrong with this?

那么我哪里出错了？

This is my code, i have taken the code out that breaks the layout, but if you remove the comments you can see what happens.

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

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

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

The naming is a little different but you'll know what is meant.

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

Thanks.

谢谢。

回答by Adriano Repetti

CSS classes cannot inherit so what you have to do is split them to be as much atomic as possible. For example if you have a rounded-corners class and it maybe applicable to containers:

CSS 类不能继承，所以你要做的就是将它们拆分为尽可能多的原子。例如，如果您有一个圆角类并且它可能适用于容器：

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

Note that you define ONLY the properties for rounded corners. Now let's say you have a class to style containers (for example with a proper padding):

请注意，您仅定义圆角的属性。现在假设您有一个类来设置容器的样式（例如使用适当的填充）：

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

How to combine them together? This won't be done in CSS but in HTML, in this example this <div>inherits from both containerand rounded-corners:

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

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

Now suppose you need rounded corners for a non container object:

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

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

This is how CSS works. Do not compare them (because of name) with classes of object oriented languages. Each class define a set of attributes that will be applied to all elements that belong to that class. Final element style is the compositionof the attributes inherited from each class that element belongs to.

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

NOTE: to summarize: answer is yes, you may have to repeat some code. You'll have trouble to manage your code (both HTML and CSS) if you use classes as short names for a style: you'll see you missed the point to separate content from style (because in HTML you'll define, using a class like rounded-corners, an explicitappearance). Imagine: next month you have to change your web-site style and fashion requirements impose you have square corners. You have to change your HTML code (unless you accept to have a rounded-cornersclass to apply a squared border). Much better if you simply say containerand you let your CSS to define (and know) how a containershould be rendered.

注意：总结：答案是肯定的，您可能需要重复一些代码。如果您使用类作为样式的短名称，您将难以管理您的代码（HTML 和 CSS）：您会发现您错过了将内容与样式分开的要点（因为在 HTML 中您将使用类rounded-corners，显式外观）。想象一下：下个月你必须改变你的网站风格，时尚要求强加给你方角。你必须改变你的 HTML 代码（除非你接受一个rounded-corners类来应用方形边框）。如果你只是简单地说container，让你的 CSS 定义（并知道） acontainer应该如何呈现，那就更好了。

It may be applicable to you or not (it depends on your preferences, taste and development environment) but you may take a look to LESS. It's implemented as a JavaScript that will parse your CSSs. Of course you won't write a pure valid CSS but you'll gain many new features. In your case you may find mixinsare what you need:

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

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

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

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

回答by jan267

You could have a CSS code like:

你可以有一个 CSS 代码，如：

.container_1 {

}
.rounded_corners {

}
.float_left {

}

and then set a class to HTML element in this way:

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

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

So the DIV element will inherit every style of every class! Obviously, DIV it's just an example, you could use every tag!

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

回答by Thai

If i get it well, you want a set of classes to apply to each div?

如果我搞定了，您是否希望将一组类应用于每个 div？

I'd break it up like that :

我会这样分解：

css

css

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

and in the html

并在 html

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

etc...

等等...