级联样式表通过挂接应用于该元素的属性来定义网页元素的外观。这些属性可以是ID或类，与所有属性一样，它们向附加到的元素添加有用的信息。...
级联样式表通过挂接应用于该元素的属性来定义网页元素的外观。这些属性可以是ID或类，与所有属性一样，它们向附加到的元素添加有用的信息。
根据添加到元素的属性，可以编写CSS选择器来应用必要的视觉样式，以实现该元素和整个网站的外观。
虽然ID或类都是为了用CSS规则连接到它们，但现代web设计方法更喜欢类而不是ID，部分原因是它们不太具体，更易于整体使用。
css中的一个或多个类？
在大多数情况下，您为一个元素指定一个类属性，但实际上，您并不局限于一个类，就像使用ID一样。虽然一个元素只能有一个ID属性，但您可以为一个元素提供几个类，在某些情况下，这样做会使页面更容易设置样式，也更灵活。
如果需要为一个元素分配多个类，请添加其他类，并在属性中用空格将它们分隔开。
例如，本段分为三类：
This would be the text of the paragraph
This sets the following three classes on the paragraph tag:
Notice the spaces between each one of these class values. Those spaces are what sets them up as different, individual classes. This is also why class names cannot have spaces in them because doing so would set them as separate classes.
Once you have your class values in HTML, you can then assign these as classes in your CSS and apply the styles you would want to add. For example.
.pullquote { ... }.featured { ... }p.left { ... }In these examples, the CSS declarations and values pairs appear inside the curly braces, which is how those styles would be applied to the appropriate selector.
If you set a class to a specific element (for example, p.left), you can still use it as part of a list of classes; however, be aware that it will only affect those elements that are specified in the CSS. In other words, the p.left style will only apply to paragraphs with this class since your selector is actually saying to apply it to "paragraphs with a class value of left," By contrast, the other two selectors in the example do not specify a certain element, so they would apply to any element that uses those class values.
Multiple Classes, Semantics, and JavaScript
Another advantage of using several classes is that it increases interactivity possibilities.
Apply new classes to existing elements using JavaScript without removing any of the initial classes. You can also use classes to define the semantics of an element — add additional classes to define what that element means semantically. This approach is how Microformats works.
Advantages of Multiple Classes
Layering several classes can make it easier to add special effects to elements without having to create a whole new style for that element.
For example, to float elements to the left or right, you might write two classes:
left
and
right
with just
float:left;
and
float:right;
in them. Then, whenever you had an element you need to float left, you would simply add the class "left" to its class list.
There is a fine line to walk here, however. Remember that web standards dictate the separation of style and structure. Structure is handled using HTML while style is in CSS. If your HTML document is filled with elements that all have class names like "red" or "left," which are names that dictate how elements should look rather than what they are, you are crossing that line between structure and style.
Disadvantages of Multiple Classes
The biggest disadvantage of using several simultaneous classes on your elements is that it can make them a bit unwieldy to look at and manage over time. It may become difficult to determine what styles are affecting an element and if any scripts affect it. Many of the frameworks available today, like Bootstrap, make heavy use of elements with multiple classes. That code can get out of hand and hard to work with very quickly if you are not careful.
When you use several classes, you also run the risk of the style for one class overriding the style of another. This collision then can make it difficult to figure out why your styles aren't being applied even when it appears that they should. Remain aware of specificity, even with the attributes applied to that one element.
By using a tool like the Webmaster tools in Google Chrome, you can more easily see how your classes are affecting your styles and avoid this problem of conflicting styles and attributes.
