What is the difference between the ID and the style settings of class in CSS?

Source: Internet
Author: User
A class is used to define one or more elements based on user-defined criteria. A more appropriate analogy is the script: A class can define the story line for each character in the script, and you can use it through css,javascript. So you can use class= "Frodo" on one page, class= "Gandalf", class= "Aragorn" to distinguish different story lines. It's also very important that you can use any number of classes in a document.

As for the ID, it is typically used to define the markup that appears only once on the page. When the layout of the page is structured (for example, a page is usually composed of a header, a header < Masthead>, a content area and a footer, etc.), the general use of the ID is ideal, because an ID can only be used once in a document. These elements rarely appear larger than once on the same page.

summed up in a sentence is: class can be used repeatedly and ID in a page can only be used once. It is possible to reuse the same ID in a very large number of browsers without problems, but on the standard it is absolutely wrong to use, and it is likely to lead to real-world problems with some browsers.

In practical applications, class may be more useful for text typesetting, while ID is useful for macro layout and design placement of various elements

The class is the set tag, the ID is the identity of the set label, and the class attribute is used to specify what style the element belongs to.

such as style sheets can be added to. content1 {color:red; background: #ff80c0} How to: class= "Content1"

The id attribute is used to define the unique style of an element. As a CSS rule #content2 {font-size:larger} usage: id= "Content2"

ID is a label that distinguishes between different structures and content, like your name,

If a room has 2 people with the same name, there will be confusion;

Class is a style that can be set on any structure and content, like a garment;

Conceptually, it's not the same:

The ID is the first to find the structure/content, and then to define the style, class is to define a style, and then set to multiple structures/content.

The ID is the name of the element that can be used by JS or another script to access the element object, and class is the CSS class name for that element.

The value of the ID should be unique throughout the current Web page, meaning that an element defines the id= "AAA", then the ID of the other elements in the page cannot be defined as AAA, and class can.

In addition, the shape of the id= "AAA" defined, in CSS is set its style:

#aaa {Style list}

As defined in the form class= "BBB", the style should be set in CSS:

. bbb{Style List}

A. The Web Standard is not allow duplicate ID, such as div id= "AA" is not allowed to repeat 2 times, and class is defined by the classes, theoretically can be infinitely repeated, so that the definition of multiple references can be used.

Two. Priority issues for attributes

The priority of ID is higher than class, see the example above

Three. Convenient JS and other client-side script, if you want to script an object in the page, then you can define an ID, otherwise only by traversing the page element plus specify a specific attribute to find it, this is a relatively waste of time resources, far less than a simple ID.

A1: What is the main difference between the two?

ID you can only use to define a single element, define two later. There is no problem with the page, but W3 detects that your page does not conform to the standard; class is classes, and the same class can define multiple elements. As far as the page effect is concerned, the visual effects of two items are almost no different.

Why is the A2:id selector less used, and what are its limitations?

Single use of the style with ID, need to program, JS dynamic control style with Id,id in the page can only be used once! Provide a less-used ID because the ID may conflict with a page-embedded program (such as the same name)!

A3: When should I use my id and when do I use class?

A single element, or something that requires a program or JS control, needs to be defined with an ID, a reusable element, a class, and a class definition.

Class is called "Classes" in the program, and in CSS it is also called "Class". In a CSS style, in lowercase "dots" and "." To name such as:. Css5{Property: Property value, and in the HTML page class= "CSS5" to select the call, named Good CSS is called CSS selector. such as:. Css5{Property: property value;} selector in HTML call as "<div class=" CSS5 "> I am class example </div>" If you do not know how to reference CSS, then you can understand the following CSS reference.

and Class (Class) in the same HTML page can be called countless times the same class class, in this case can be in the corresponding page can be called countless times to select "Css5". This also means that class is typically used to invoke pre-configured properties in CSS, such as a pre-configured property such as ". Class01{Property: property value;} ", so that you can call a function like a page without repeating the configuration of a" class "property, and simply write a class selection, you can call anywhere in the same page to choose the same class class.

ID is the identity of the label, in the JS script will use the ID, when JS to modify the properties of a tag, JS will be the ID name as the label's unique identity to operate. That is, the ID is just the identity of the page element and is referenced by other element scripts. If there are two IDs in your page, the JS effect is more than a logical error, and you don't know which ID to change its tag properties. In CSS, the ID is not necessarily set for JS, but the same ID can only appear once in the page, and is unique. Although we may be able to learn div+css enthusiasts in a page to invoke the same ID multiple times but there is still no page chaos error, but we for the web and various standards we also have to follow the ID on a page unique. Avoid browser compatibility issues.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.