多个CSS类，它们是如何工作的，为什么要这样做？

-2

我是一个程序员而不是CSS老兄，而且大多数程序员都没有花太多时间去理解CSS的效果。一直以来都有UX用户需要处理。但随着我越来越有经验，我正在挖掘CSS和UX。所以我的问题是这样的：多个CSS类，它们是如何工作的，为什么要这样做？

我明白了什么：

<div class="AClassName" > 
</div>

我了解这涉及到.css文件，并会发生什么。

我不明白：

<div class="AClassName andAnother1 andAnother2"> 
</div>

我希望有一个简单的解释。

来源

2014-01-20 T McKeown

你到底不明白什么？一个元素可能有多于一个类被应用 – fcalderan

确切地说..是第一类比任何后续类更占优势？它只是一个混合动力？ –

我觉得这只是基本的CSS。有大量网站教授CSS基础知识，请使用[** Google **]（http://www.google.com）并找到它们。 – Ruddy

只是一个例子：

<div class="positionClass contentClass decorClass"> 
    Lorem textum 
</div>

.positionClass：这里的任何位置属性可以被applyed，4example绝对/固定位置，显示属性，边缘/负余量。

.contentClass：这里我们可以添加样式到文本：行高，字体大小等。

最后一个为一些装饰元素。

希望你的想法。

来源

2014-01-20 13:40:23

完美的解释。这正是我所期待的。 –

您可以按任意顺序为同一元素设置多个类。顺序在.css文件本身中很重要。想象一下，所有类都被添加到一个数组中，并且所有键（如宽度，高度......）都被该键的任何新条目覆盖（从上到下读取文件）。

来源

2014-01-20 13:38:26 Justinas

CSS从上到下工作 - 意味着最后添加的样式将覆盖以前的任何样式。

举例来说，如果我把一个按钮，一个class="btn"和风格btn为background-color:black;我所有的按钮会变黑，但我想有一个按钮，是红色的，然后我添加class="btn btnCustom"或class="btnCustom btn"和风格btnCustom有background-color:red它将仅覆盖该按钮的样式。

参见JS拨弄波纹管： http://jsfiddle.net/udru2/

来源

2014-01-20 13:38:38 Lukas

让我假设我有两个div's这样

<div class='make-red capitalize'>abcd</div> 
<div class='make-green make-center'>askhdj</div>

和css如下

.make-red{ 
color:red; 
} 

.capitalize{ 
text-transform:uppercase; 
} 

.make-green{ 
color:green; 
} 

.make-center{ 
text-align:cneter; 
}

在我们使用这些数据将风格的divs鲁特大的页面，这种的方法可以帮助你。这只是一个可以共享的单一用途。

来源

2014-01-20 13:44:13

多个CSS类，它们是如何工作的，为什么要这样做？

回答

相关问题