Class Selector
In CSS, the class selector is displayed with a point number:
Copy Code code as follows:
. Center {Text-align:center}
In the above example, all HTML elements that have the center class are centered.
In the following HTML code, the H1 and P elements all have the center class. This means that both will comply with the rules in the. Center selector.
Copy Code code as follows:
<H1 class= "center" >
This heading would be center-aligned
<p class= "center" >
This paragraph would also be center-aligned.
</p>
Note: The first character of the class name cannot use a number! It doesn't work in Mozilla or Firefox.
As with IDs, class can also be used as a derivation selector:
Copy Code code as follows:
. Fancy TD {
Color: #f60;
Background: #666;
}
In the example above, the table cell inside the larger element with the class name fancy will display the orange text in a gray background. (a larger element named Fancy may be a table or a div)
Elements can also be selected based on their classes:
Copy Code code as follows:
td.fancy {
Color: #f60;
Background: #666;
}
In the example above, the table cell with the class name fancy will be orange with a gray background.
Copy Code code as follows:
Multi-Class Selector
1, in HTML, a class value may contain a list of words, separated by a space between the words. For example, if you want to mark a particular element as important (important) and warning (warning) at the same time, you can write (the order of these two words does not matter, written as warning important can):
Copy Code code as follows:
<p class= "Important Warning" >
This paragraph is a very important warning.
</p>
We assume that all elements of class important are bold, and that all elements of class warning are italicized, with all the elements of important and warning in class and a silver background. will be able to write:
Copy Code code as follows:
. Important {Font-weight:bold}
. Warning {Font-weight:italic}
. important.warning {Background:silver}
2. By linking the two class selectors, you can select only those elements that contain the names of these classes (the order of the class names is not limited).
If a multiple-class selector contains a class name that is not in the list of class names, the match fails. Take a look at the following rules:
Copy Code code as follows:
. important.urgent {Background:silver}
Unsurprisingly, this selector will match only the P elements in the class attribute that contain the words important and urgent. Therefore, if the class attribute of a P element has only the word important and warning, it will not match. However, it can match the following elements:
Copy Code code as follows:
<p class= "Important Urgent warning" >
This paragraph is a very important and urgent warning.
</p>
