Detailed explanation of how to use css class selector_CSS/HTML

Class selector
In CSS, the class selector is displayed as a period:

Copy code The code is as follows:

.center {text-align: center}

In the above example, all HTML elements with the center class are centered.
In the HTML code below, both the h1 and p elements have the center class. This means that both will obey the rules in the ".center" selector.

Copy code The code is as follows:

This heading will be center-aligned

This paragraph will also be center-aligned.

Note: Numbers cannot be used as the first character of the class name! It won't work in Mozilla or Firefox.
Like id, class can also be used as a derived selector:

Copy code The code is as follows:

  .fancy td {
       color: #f60;
      background: #666; Table cells inside larger elements will have orange text on a gray background. (A larger element named fancy might be a table or a div.)
Elements can also be selected based on their class:

Copy code The code is as follows:

td.fancy {
color: #f60;
background: #666;
}

In the above example, the table cell with class name fancy will be orange with a gray background.

Copy code The code is as follows:

Multi-category selector

1. In HTML, a class value may contain a list of words, with each word separated by spaces. For example, if you want to mark a specific element as both important and warning, you can write (the order of the two words does not matter, you can also write warning important):

Copy code The code is as follows:

This paragraph is a very important warning.

We assume that all elements with class important are bold, and all elements with class warning are italic, and all elements with class containing both important and warning are also There is a silver background. You can write:

Copy code The code is as follows:

.important {font-weight: bold;}
.warning {font-weight:italic;}
.important.warning {background:silver;}

2. By linking two class selectors Together, only elements containing both of these class names can be selected (the order of the class names is not limited).
If a multi-class selector contains a class name that is not in the class name list, the match will fail. Please see the following rules:

Copy code The code is as follows:

.important.urgent { background:silver;}

As expected, this selector will only match p elements whose class attribute contains the words important and urgent. Therefore, if a p element has only the words important and warning in its class attribute, it will not match. However, it does match the following elements:

Copy code The code is as follows:

This paragraph is a very important and urgent warning.