How to use css classes and id selectors

In CSS, the class selector is used to select elements with a specified class (class), represented by a period, and the syntax is ".specified class {style attribute: style attribute value;}". The id selector is used to specify a specific style for the html element marked with a specific id. It is defined using "#" and the syntax is "#specific id value {specific attribute: specific attribute value;}".

The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.

How to use css class and id selectors

Class selector

.class selector selection band There are elements of the specified class.

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 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).

id selector

The id selector can specify a specific style for HTML elements marked with a specific id.

id selector is defined with "#".

The following two id selectors, the first one can define the color of the element as red, and the second one can define the color of the element as green:

#red {color:red;}
#green {color:green;}

In the following HTML code, the id attribute The p element whose id attribute is green is displayed in red, and the p element whose id attribute is green is displayed in green.

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

Note: The id attribute can only appear once in each HTML document. To find out why, see XHTML: Website Refactoring.

id selector and derived selector

In modern layouts, the id selector is often used to create derived selectors.

#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}

The above style will only be applied to paragraphs that appear within the element whose id is sidebar. This element is most likely a div or table cell, although it could also be a table or other block-level element. It can even be an inline element, such as 907fae80ddef53131f3292ee4f81644bd1c6776b927dc33c5d9114750b586338 or 45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d114, but such usage is illegal because it cannot be used within an inline element 45a2772a6b6107b401db3c9b82c049c2 Embed e388a4556c0f65e1904146cc1a846bee (if you forget why, see XHTML: Website Refactoring).

One selector, multiple uses

Even if the element marked as sidebar can only appear once in the document, this id selector can be used many times as a derived selector:

#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
#sidebar h2 {
font-size: 1em;
font-weight: normal;
font-style: italic;
margin: 0;
line-height: 1.5;
text-align: right;
}

Here, what is obviously different from other p elements in the page is that the p element inside the sidebar has been specially treated. At the same time, what is obviously different from all other h2 elements in the page is that the h2 in the sidebar Elements also get different special treatment.

Individual selectors

The id selector can function independently even if it is not used to create a derived selector:

#sidebar {
border: 1px dotted #000;
padding: 10px;
}

According to this rule, id is The sidebar element will have a pixel-wide black dotted border and 10 pixels of padding around it. Older versions of Windows/IE browsers may ignore this rule unless you specifically define the element to which this selector belongs:

div#sidebar {
border: 1px dotted #000;
padding: 10px;
}

(Learning video sharing: css video tutorial, html video tutorial)

The above is the detailed content of How to use css classes and id selectors. For more information, please follow other related articles on the PHP Chinese website!