In css, the class selector adds a dot before the class name. If a class is not followed by multiple dots. important. urgent. Next I will introduce the usage of CSS class selectors and multi-class selectors.
In CSS, the class selector is displayed with a dot:
The Code is as follows:
. Center {text-align: center}
In the preceding example, all HTML elements with the center class are centered.
In the following HTML code, both h1 and p elements have center classes. This means both of them will comply with the rules in the ". center" selector.
The Code is as follows:
This heading will be center-aligned
This paragraph will also be center-aligned.
Note: the first character of the class name cannot contain numbers! It does not work in Mozilla or Firefox.
Like id, class can also be used as a derivative selector:
The Code is as follows:
. Fancy td {
Color: # f60;
Background: #666;
}
In the above example, the table cells inside the larger element of the class named fancy will display orange text with a gray background. (The bigger element named fancy may be a table or a p)
Elements can also be selected based on their classes:
The Code is as follows:
Td. fancy {
Color: # f60;
Background: #666;
}
In the above example, the table unit named fancy will be orange with a gray background.
The Code is as follows:
Multi-class selector
1. In HTML, a class value may contain a word list, separated by spaces. For example, if you want to mark a specific element as important and warning at the same time, you can write (the order of these two words does not matter, but can also be written as warning important):
The Code is as follows:
This paragraph is a very important warning.
Let's assume that all the elements whose class is important are in bold, while all the elements whose class is warning are in italic. All the elements whose class contains both important and warning have a silver background. You can write:
The Code is as follows:
. Important {font-weight: bold ;}
. Warning {font-weight: italic ;}
. Important. warning {background: silver ;}
2. By linking two class selectors, you can only select the elements that contain these class names at the same time (the order of class names is not limited ).
If a multi-class selector contains a class name that is not in the class name table, the matching fails. See the following rules:
The Code is as follows:
. Important. urgent {background: silver ;}
As expected, this selector will only match the p element containing the word important and urgent in the class attribute. Therefore, if the class attribute of a p element contains only the words important and warning, it will not match. However, it can match the following elements:
The Code is as follows:
This paragraph is a very important and urgent warning.
