The difference between a class and an ID selector in a CSS selector

Source: Internet
Author: User

Differences between class and ID selectors

Learning the class selector and ID selector, we will find that there are a lot of similarities between them, is not the two can be common? Let's not be anxious to summarize their similarities and differences in the first few years:

same point: can be applied to any element
Different points:

1.The ID selector can only be used once in a document . Unlike class selectors, an ID selector can only be used once, and only once, in an HTML document. The class selector can be used more than once.

The following code is correct:

class= "Stress" class= "Stress"> Courage </span> to answer the questions asked by the teacher. </p>

And the following code is wrong:

id= "Stress" id= "Stress"> Courage </span> to answer the questions asked by the teacher. </p>

2 . You can use the class selector word list method to set multiple styles for an element at the same time. we can set multiple styles for one element at the same time, but only with the method of the class selector, the ID selector is not possible (the list of ID words cannot be used).

The following code is correct (see the Code Editor on the right for the full code)

class= "Stress bigsize"> Third grade </span> next semester, our class has a public class ...</p>

The function of the above code is to set the text color to red for the "third grade" three text and the font size to 25px.

The following code is incorrect (see the Code Editor on the right for the full code)

id= "Stressid Bigsizeid"> Third grade </span> next semester, our class has a public class ...</p>

The above code can not be implemented for the "third grade" three text set the text color is red and the font size for the effect of 25px.

The difference between a class and an ID selector in a CSS selector

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.