继承自另一个css类

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

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

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

现在他们每个人都有一些独特的属性，但他们也遵循一个集样式，例如，每个李的div并排，所以它的两个div的集合也都会有圆角。

所以我想我可以做一个类类rounded_corners加float_left和float_right再等等，而不是键入代码圆鸡眼或漂浮的东西我可以参考的东西类是这样的：

.container_1 .rounded_corners .float_left 
{ 

} 
.container_2 .rounded_corners .float_right 
{ 

}

但是，当我用这个，我放松了我的造型，所以我用了一个逗号，这样可以让div回来，但角落和花车不起作用。

那么我在哪里错了呢？

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

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

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

谢谢。

来源

2012-10-24 ragebunny

只是以供将来参考：类名基于*如何看起来*不推荐。基于*代表什么*的类名称要好得多。 –

@RyanKinal感谢您的提示伙伴，这些名称目前仅用于测试目的，通常我对命名非常严格（这是我对哈哈严格的一件事） – ragebunny

总是很好听！ –

CSS类不能继承，所以你必须做的就是将它们分割成尽可能多的原子。例如，如果你有一个圆润，边角类，它可以适用于容器：

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

请注意，您只定义了圆角的属性。现在让我们假设你有一个类样式的容器（例如用适当的填充）：

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

如何将它们结合在一起？这不会在CSS但在HTML来完成，在这个例子来自container和rounded-corners这<div>继承：

<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 
}

来源

2012-10-24 14:58:14

我明白了，我认为我正在努力改变我对班级的思考方式，我习惯于使用面向对象的语言。至于最后一个注释，你是说使用一个名字如round_corners的类是不好的，因为它没有解释类是什么，我最终只是使用class =“rounded_corners”？ – ragebunny

也许像market_card_boder_style这样的东西会解释更多。 – ragebunny

@ragebunny不，这不是因为意思。尝试回答：例如，如果cellpadding属性被认为是邪恶的（因为您将内容与HTML中的样式混合），那么为什么圆角应该更好？你用HTML写了一些关于外观的东西。 “容器”是好的（你说它是一个容器，你不会问它应该如何渲染）。我添加了一个关于LESS的小例子，看看它。 –

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

.container_1 { 

} 
.rounded_corners { 

} 
.float_left { 

}

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

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

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

来源

2012-10-24 14:56:44 jan267

如果我得到它好，你想一组类应用到每个单吗？

我打破它像：

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>

等等

来源

2012-10-24 15:00:58 Thai

所以，我没有办法在CSS表中使用我的容器类的rounded_corner类？ – ragebunny

没有这样做的更整洁的方法，因为将多个类放入html中的class属性看起来非常混乱，并且总是要求您尽可能使事情变得清晰和干净。 – ragebunny

好吧，你可以把'rounded_corners'属性放在'容器'类中，如果你的所有容器都有这个属性 – Thai

继承自另一个css类

回答

相关问题