Question

我是一名程序员而不是CSS老兄，并且大多数程序员都没有花太多时间来理解CSS的影响。一直有一个UX人员需要处理。但随着我越来越有经验，我正在挖掘CSS和UX。所以我的问题是：

我的理解：

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

我理解这与.css文件的关系以及会发生什么。

我不明白：

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

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

Answer 1

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

例如，如果我带一个class="btn"按钮，样式btn为background-color:black;我的所有按钮都是黑色但我想要一个红色的按钮，然后我添加class="btn btnCustom"或class="btnCustom btn"和样式btnCustom只有background-color:red才会覆盖该按钮的样式。

见JS小提琴： http://jsfiddle.net/udru2/

Answer 2

只是一个例子：

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

.positionClass：此处可以应用任何位置属性，4个样本绝对/固定位置，显示属性，边距/负边距。

.contentClass：这里我们可以为文字添加样式：line-height，font-size等。

最后一个装饰元素。

希望你明白这一点。

Answer 3

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

Answer 4

我想我有两个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的抢劫的大页面中，这种方法可以帮助您。这只是一个可以共享的用途。

多个CSS类，它们如何工作以及为什么这样做？

4 个答案: