您不限于每个元素的单个CSS类。
级联样式表（CSS）允许您通过挂接应用于该元素的属性来定义元素的外观。 这些属性可以是ID和一个类，并且像所有属性一样，它们可以将有用的信息添加到它们所连接的元素。 根据您添加到某个元素的属性，您可以编写一个CSS选择器来应用所需的视觉样式，以实现该元素和整个网站的外观。
尽管ID或类都可以用CSS规则来挂钩，但现代网页设计方法偏好ID类，部分原因是它们不太具体，并且更易于整体使用。 是的，您仍然会发现许多使用ID的网站，但这些属性比以前更节省地应用，而类已经接管了现代网页。
CSS中的单个或多个类？
在大多数情况下，您可以将一个类属性分配给一个元素，但实际上它们不仅限于您使用ID时的一个类。 虽然一个元素只能拥有一个ID属性，但您可以绝对地给一个元素多个类，并且在某些情况下，这样做会使您的页面更容易风格并且更加灵活！
如果您需要将多个类分配给元素，则可以添加其他类并简单地将它们与属性中的空格分开。
例如，这个段落有三个类：
pullquote featured left ”>这将是段落的文字
这会在段落标记上设置以下三个类：
- Pullquote
- 精选
- 剩下
注意这些类值中的每一个之间的空格。 这些空间是将它们设置为不同的单独的类。 这也是为什么类名不能包含空格的原因，因为这样做会将它们设置为单独的类。
例如，如果使用没有空格的“pullquote-featured-left”，它将是一个类值，但上面的例子中，这三个词用空格分隔，将它们设置为单个值。 在决定在网页上使用哪些类别值时，理解此概念非常重要。
一旦你有了HTML中的类值，你可以将它们分配为CSS中的类并应用你想要添加的样式。 例如。
.pullquote {...}
.featured {...}
p.left {...}
在这些示例中，CSS声明和值对将位于花括号内，这些样式将如何应用于适当的选择器。
注意 - 如果您将类设置为特定元素 （例如，p.left），则仍然可以将其用作类列表的一部分; 但是，请注意，它只会影响CSS中指定的元素。 换句话说，p.left风格只适用于具有此类的段落，因为您的选择器实际上是在将其应用于“段落值为'left'的段落”。 相比之下，示例中的其他两个选择器并未指定某个元素，因此它们将应用于使用这些类值的任何元素。
多个类的优点
多个类可以更容易地向元素添加特效，而无需为该元素创建全新的样式。
例如，您可能希望能够快速向左或向右浮动元素 。 你可以用float：left来编写左右两个类： 和float：right; 在他们中。 然后，每当你有一个元素需要向左浮动时，你只需将类“left”添加到它的类列表中。
然而，这里有一条很好的线路。 请记住，网络标准决定了风格和结构的分离。 样式处于CSS时，结构通过HTML进行处理。
如果您的HTML文档中充满了所有类名称（如“红色”或“左”）的元素，这些名称指示元素应该如何显示而不是它们的内容，那么您正在跨结构和样式之间的界限。 我尽量限制我的非语义类名，因为这个原因。
多个类，语义和JavaScript
使用多个类的另一个优点是它为您提供了更多的交互可能性。
您可以使用JavaScript将新类应用于现有元素，而无需删除任何初始类。 您还可以使用类来定义元素的语义 。 这意味着您可以添加额外的类来定义该元素在语义上的含义。 这就是微格式的工作原理。
多个类的缺点
在您的元素上使用多个类最大的缺点是它可能会让他们随着时间的推移而查看和管理有点笨拙。 确定哪些样式影响元素以及是否有任何脚本影响元素可能会变得很困难。 今天许多可用的框架，比如Bootstrap，都会大量使用具有多个类的元素。 如果您不小心，该代码可能非常快速并且很难快速工作。
当你使用多个类时，即使你不打算这样做，你也可能冒着让一个类的样式重写另一个类的风格的风险。 这样就很难找出为什么你的风格不适用，即使它看起来应该如此。
即使将属性应用于该元素，也需要注意特异性！
通过在Chrome中使用类似网站管理员工具的工具，您可以更轻松地了解您的课程如何影响您的风格，并避免出现相互冲突的风格和属性问题。
Jennifer Krynin的原创文章。 由Jeremy Girard于8/7/17编辑