多个CSS课程，它们的工作方式以及为什么这样做

Question

我是一个程序员，不是CSS的家伙，而且像大多数程序员一样，没有花太多时间尝试理解CSS的效果。一直有一个用户友好的人可以处理。但是，随着我的经验越来越多，我正在挖掘CSS和UX。所以我的问题是：

我了解的内容：

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

我了解这与.css文件的关系以及将会发生的事情。

我不明白：

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

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

Answer 1

只是一个示例：

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

.positionClass：这里可以应用任何位置属性，4个示例绝对/固定位置，显示属性，边距/负边距。

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

和某些装饰元素的最后一个。

希望您明白。

Answer 2

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

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

请参阅JS小提琴：http://jsfiddle.net/udru2/

Answer 3

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

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的掠夺，这种方法可以帮助您。这只是可以共享的一种用途。