What is the difference between css class and id selector

Difference: 1. The style selector "#" is used when id corresponds to css; while the style selector "." is used when class corresponds to css. 2. Class can be reused in the page; but id can only appear once in the page, so it cannot be reused.

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

CSS Id and Class selector

If you want to set CSS styles in HTML elements, you need to set "id" in the element and the "class" selector.

id selector

The id selector can specify a specific style for HTML elements marked with a specific id. The HTML element uses the id attribute to set the id selector, and the id selector in CSS 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>

class selector

class selector is used to describe the style of a group of elements. The class selector is different from the id selector. Class can be in multiple elements. use. The class selector is represented by the class attribute in HTML. In CSS, the class selector is displayed with a dot ".":

.center {text‐align: center}

In the above example, all HTML with the center class The elements are all centered.

Of course you can also specify specific HTML elements using classes. In the following example, all p elements use class="center" to center the text of the element:

p.center {text‐align:center;}

The difference between id and class in css

1. Syntax difference:

id corresponds to css using the style selector "#" (pound sign).

class corresponds to the css using the style selector "." (English half-width input period).

2. Difference in usage times:

class can be reused in the page,

id can only appear once in the page, so it cannot be reused,

So try to write it in class, so that the css you write can be repeatedly referenced in the page, reducing the workload and code amount.

(Learning video sharing: css video tutorial)

The above is the detailed content of What is the difference between css class and id selector. For more information, please follow other related articles on the PHP Chinese website!