What is the representation of class selector in css?

In CSS, the class selector is displayed as 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: The first character of the class name cannot use numbers! 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 have a gray background Orange text is displayed. (A larger element named fancy might be a table or a div)

Elements can also be selected based on their class:

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

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

<td class="fancy">

You can assign class fancy to any table element as many times as you like. Cells marked with fancy will be orange with a gray background. Cells that are not assigned a class named fancy are not affected by this rule. It's also worth noting that paragraphs with class fancy will not be orange with a gray background, and of course any other elements marked as fancy will not be affected by this rule. This is all due to the way we wrote this rule, the effect is limited to table cells marked as fancy (i.e. using the td element to select the fancy class).

The above is the detailed content of What is the representation of class selector in css?. For more information, please follow other related articles on the PHP Chinese website!