A detailed explanation of the differences between CSS class selectors and ID selectors

This article mainly introduces the CSS class selector and ID selector difference, small series think very good, and now share to everyone, but also for everyone to do a reference. Follow the small part together to see it, hope to help everyone better learn CSS class selector and ID selector.

Class Selector

HTML code:

<p class= "One" ></p><p></p>

CSS code:

p {    width:200px;    height:200px;    border:1px solid #000;    margin:20px;}. One {    box-shadow:5px 5px 3px rgba (0,0,0,.5);}

You can use a class selector if you want the appearance of some elements in your Web page to be separate from other similar labels.

First give the selector a name, and then assign the name to the HTML tag that you want to decorate. For example, in the previous example, I named "One" for the first p.

The class selector also gives you precise control over the appearance of an element, regardless of which tag the element is using. For example, to decorate a paragraph of one or two words, the child does not want to affect the entire <p> label appearance. You can then use the class selector to select the words you want to decorate.

It is important to note that using the class selector to select some of the words in a tag requires a <span> tag.

The use of class selectors:

1. In CSS, the name of a class selector must begin with a dot. This allows the Web browser to find the class selector in the style sheet.

2. The name of a class selector can contain only letters, numbers, hyphens, and underscores.

3. The name of the selector must begin with a letter.

4. Class selectors are case-sensitive.

5. In HTML, the label sets the Class property. <p class= "class name" >.

In HTML, the value of the class attribute is not preceded by a dot number. You only need a dot before the name of the class selector in the style sheet.

One label uses more than one class

In addition to applying the same class to different labels, a label can use multiple classes at the same time.

Writing multiple class styles, setting multiple classes in a single label, sounds like a lot of work, but it's often done in real-world development. This is how the bootstrap framework of fire is compared.

For example, we have multiple p, each p has the same size and border, and the other properties are different.

HTML code:

<p class= "P One" ></p><p class= "P" ></p><p class= "p three" ></p>

CSS code:

/* Type selector */p {    width:200px;    height:200px;    border:1px solid #000;    margin:20px;} /* The following three are class selectors */.one {    background:linear-gradient (#1574A8, #15A892);    box-shadow:5px 5px 3px Rgba (0,0,0,.5);}. {    background:radial-gradient (#E94E65, #15A892);}. Three {    background:         linear-gradient (to bottom, cyan, transparent),        linear-gradient (225deg, Magenta, Transparent),        linear-gradient (45deg, yellow, transparent);}

Both Web browsers and HTML allow multiple classes to be set for the same label. In HTML, classes are specified by the Class property, and each class name in its value is separated by a space.

The browser merges the attributes of each class and then applies them to the element.

ID Selector

CSS uses the ID selector to select specific parts of a page, such as a banner, navigation bar, or main content area.

The method of setting the ID in HTML is the same as setting the class, but the properties used are different.

HTML code:

<p id= "D1" ></p><p></p>

CSS code:

p {    width:200px;    height:200px;    border:1px solid #000;    margin:20px;} #d1 {    background:         linear-gradient (to bottom, cyan, transparent),        linear-gradient (225deg, Magenta, Transparent),        linear-gradient (45deg, yellow, transparent);}

In HTML, the element sets the ID property.

In CSS, start with the # pound sign, followed by the ID name.

Use ID correctly

The HTML ID attribute has some effect that the class attribute does not implement. These advantages do not matter with CSS, so the ID selector can be completely inapplicable.

Benefits of ID:

1. When you set an ID for a page's key element, the JavaScript programmer can easily locate and process a portion of the page with an ID. For example, programmers often set an ID for elements of a form, such as a text box that fills in a visitor's name. JavaScript can do a lot of processing after locating this form element with an ID, for example, to make sure which field is not empty when the guest submits the form.

2. The use of IDs can also be linked to specific parts of a Web page, which facilitates quick navigation for pages with more content. If you have a glossary in alphabetical order, you can use the ID to select linked to the section that starts with each letter.

The Web design circle has a tendency to try not to use the ID selector in CSS.

My understanding is that the ID selector has a higher degree of specificity, and subsequent overwriting of the style will increase the difficulty. And the use of the ID of the degree of the use of a wide range of categories.

The id attribute is equivalent to our identity card and is uniquely marked.

Class attributes are a bit like people's values, people with the same values can have a lot, one can also have several values at the same time.

Different points of the ID selector and class selector

1. An element can have more than one class, and a class can also be added to multiple elements.

2. An ID can appear only once in the same page, and an element can have only one ID.