CSS Id and Class selectors

CSS Id and Class

id and class selectors

If you want to style CSS in HTML elements, you need to set the "id" and "class" selectors in the elements.

id selector

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

HTML elements set the id selector with the id property, and the id selector in CSS is # by .

The following style rules apply to the element property id , "para1":

The ID property does not start with a number, and the ID at the beginning of the number does not work in the Mozilla/Firefox browser.

The ID property can only appear once in each HTML document. F or specific explanations, see XHTML: Site Refactoring.

Class class selector

The class selector is used to describe the style of a set of elements, the class selector is different from the id selector, and the class can be used in multiple elements.

The class selector is represented in HTML by the class property, and in CSS, the class selector is represented by a point" . The number shows:

In the following example, all HTML elements that own the center class are centered.

You can also specify that specific HTML elements use class.

In the following example, all p-elements center the text of the element by using class="center":

The first character of the class name cannot use a number! It doesn't work in Mozilla or Firefox.

Label selector

In addition to the id and class selectors mentioned, the third selector is the label selector, which uses HTML tags as the selectors used for CSS decoration.

Inline selector

The fourth inline selector writes CSS code directly inside the label.

These four CS selectors have a modified priority, i.e.:

Inline Selectors and id Selectors and Class Selectors and Label Selectors

Extended reading

When setting CSS styles in HTML tags, there are a number of CSS selectors to choose from, and you can learn more about CSS selectors by referencing the CSS3 selectors categorization arrangement on this site, which includes the new selectors in CSS3.