Detailed examples of how to use class selectors in css

In CSS, the class selector is to add a dot in front of the class name. If there are multiple classes, instead of adding multiple dots, it will be in the form of .important.urgent.

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

    .center {text-align: center}

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

   <h1 class="center"> 
    This heading will be center-aligned 
    </h1> 
    <p class="center"> 
    This paragraph will also be center-aligned. 
    </p>

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:

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

In the above example, the table cells inside the larger element with the class name fancy will display orange text on a gray background . (A larger element named fancy might be a table or a p)
Elements can also be selected based on their class:

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

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

   <td class="fancy">

Multi-class selector

1. In HTML, a class value may contain a list of words, 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, warning important will also work):

<p class="important warning">
This paragraph is a very important warning.
</p>

us Assume that all elements with a class of important are in bold, and all elements with a class of warning are in italics. All elements with a class of both important and warning also have a silver background. It can be written as:

.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. Consider the following rules:

.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 will match the following elements:

<p class="important urgent warning">
This paragraph is a very important and urgent warning.
</p>

The above is the detailed content of Detailed examples of how to use class selectors in css. For more information, please follow other related articles on the PHP Chinese website!