What does the CSS class selector look like (code)

In CSS, the class selector is displayed with a dot:                                                                                                                       ##In the above example, all HTML elements with the center class are centered.

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

.center {text-align: center}

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:

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

In the above example, the larger class named fancy Table cells inside the element will display 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:

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

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

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

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 is also worth noting that paragraphs with class fancy will not be orange with a gray background. 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 does the CSS class selector look like (code). For more information, please follow other related articles on the PHP Chinese website!