Detailed explanation of the difference between CSS class selectors and ID selectors

This article mainly introduces the difference between CSS class selectors and ID selectors. The editor thinks it is quite good. Now I will share it with you and give you a reference. Let's follow the editor and take a look. I hope it can help everyone learn CSS class selectors and ID selectors better.

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);
}

If you want to distinguish the appearance of certain elements in a web page from other similar tags, you can use class selectors.

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

Class selectors can also precisely control the appearance of an element, regardless of which tag the element uses. For example, you want to decorate one or two words in a paragraph without affecting the appearance of the entire

tag. At this time, you can use the class selector to select the words to be decorated.

It should be noted that when using the class selector to select some words in a tag, you need to use the tag.

Usage of class selector:

1. In CSS, the name of the class selector must start with a period. This way the web browser can find the class selector in the style sheet.

2. Class selector names can only contain letters, numbers, hyphens, and underscores.

3. The selector name must start with a letter.

4. Class selectors are case-sensitive.

5. In HTML, tags set the class attribute.

   .

In HTML, the value of the class attribute does not need to be preceded by a period. A dot is required only before the name of the class selector in the style sheet.

A label uses multiple classes

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

Writing multiple class styles and setting multiple classes in one tag sounds like a lot of work, but it is often done in actual development. The popular bootstrap framework does this.

For example, we have multiple ps. Each p has the same size and border, but other attributes are different.

HTML code:

<p class="p one"></p>
<p class="p two"></p>
<p class="p three"></p>

CSS code:

/* 类型选择器 */
p {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    margin: 20px;
}

/* 以下三个都是类选择器 */
.one {
    background: linear-gradient(#1574A8, #15A892);
    box-shadow: 5px 5px 3px rgba(0,0,0,.5);
}
.two {
    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 tag . In HTML, classes are specified through the class attribute, with each class name in its value separated by a space.

The browser will merge the attributes of each class together and then apply them to the element.

ID Selector

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

The method of setting ID in HTML is similar to the method of setting class, but the attributes 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, an element sets the id attribute.

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

Use ID correctly

The id attribute of HTML has some functions that cannot be achieved by the class attribute. These advantages have nothing to do with CSS, so ID selectors are completely unnecessary.

Advantages of ID:

1. #After setting IDs for key elements of a web page, JavaScript programmers can easily locate and process elements in the web page through the IDs. a certain part of the content. For example, programmers often set IDs for elements of a form, such as a text box for filling in a visitor's name. JavaScript can do a lot of processing after locating this form element by ID, for example, ensuring that which field is not empty when the visitor submits the form.

2. Using ID can also link to specific parts of the web page, which facilitates quick navigation for web pages with a lot of content. If you have an alphabetical glossary, you can use ID selectors to link to sections that begin with each letter.

There is a trend in Web design circles to try not to use ID selectors in CSS.

My understanding is that because the ID selector is relatively specific, it will be more difficult to overwrite the style later. And the usage of ID is not as wide as the usage of class.

The ID attribute is equivalent to our personal ID card, which is uniquely identifiable.

Class attributes are somewhat similar to people's values. There can be many people with the same values, and one person can also have several values ​​at the same time.

The difference between ID selector and class selector

1. An element can have multiple classes, and a class can also be added to multiple element.

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

related suggestion:

css class selector and id selector

CSS class selector (4)_html/css_WEB-ITnose

css selector

The above is the detailed content of Detailed explanation of the difference between CSS class selectors and ID selectors. For more information, please follow other related articles on the PHP Chinese website!