CSS id selector

[Introduction] id selector The id selector can specify a specific style for HTML elements marked with a specific id. The 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:re

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 p element with the id attribute red is displayed in red, and the p element with the id attribute green is displayed in green.

This paragraph is in red.

This paragraph is green.

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 p or table cell, although it could also be a table or other block-level element. It can even be an inline element, such as or , but such usage is illegal because it cannot be used within an inline element Embed

(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. Times:

#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, it is different from the other p elements in the page. Unlike all other h2 elements, the h2 elements in the sidebar also receive 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, the element with the id of sidebar will have a pixel-wide black dotted border, and at the same time It will be surrounded by 10 pixels of padding (internal white space). Older versions of Windows/IE browsers may ignore this rule unless you specifically define the element to which this selector belongs:

p#sidebar {

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

The above is the detailed content of CSS id selector. For more information, please follow other related articles on the PHP Chinese website!