Home > Others

Rational use of ID selectors and class selectors

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

I. What is the ID selector and class selector

The two main selectors of the CSS selector: The ID selector primarily refers to the selection of nodes through the ID of the DOM (Document Object Model) node, such as code

1 <!DOCTYPE HTML>2 <HTML>3     <Head>4         <MetaCharSet= "Utf-8">5         <title>ID Selector</title>6         <styletype= "Text/css">7 #box{8 Background-color:#0000FF;9             }Ten         </style> One     </Head> A     <Body> -         <DivID= "box"></Div> -     </Body> the </HTML>

Using the ID selector in CSS requires a "#" + "ID name". The class selector (some also called the class selector) primarily refers to the selection of nodes by the class name (class) of the DOM (Document Object Model) node, such as code

1 <!DOCTYPE HTML>2 <HTML>3     <Head>4         <MetaCharSet= "Utf-8">5         <title>ID Selector</title>6         <styletype= "Text/css">7 . Box{8 Background-color:#0000FF;9             }Ten         </style> One     </Head> A     <Body> -         <Divclass= "box"></Div> -     </Body> the </HTML>

Using the class selector in CSS requires a "." + "class name".

two.The similarities and differences between the ID selector and class selector

Both selectors are able to select the DOM node and add styles to the DOM node.

Different points
  1. Each DOM node allows multiple classes, but typically only one ID is allowed. A DOM node has multiple stacks that naturally produce styles, so what happens if a DOM node has more than one ID?
    1 <!DOCTYPE HTML>2 <HTML>3     <Head>4         <MetaCharSet= "Utf-8">5         <title>ID Selector</title>6         <styletype= "Text/css">7 #bgbox{8 Background-color:#0000FF;9             }Ten #widthbox{ One width:100px; A Height:100px; -             } -         </style> the     </Head> -     <Body> -         <DivID= "Bgbox widthbox"></Div> -     </Body> + </HTML>

    Based on the test, it is found that the style of the div is neither color nor width height when the browser (Chrome) window is used for testing, which means that a DOM node is not allowed to have multiple IDs

  3. The ID selector has a higher precedence over the DOM node's style control than the class selector.
  5. In a Web-compliant page, the ID selector chooses the number of DOM nodes ≤1, which may be 0 or N (n≥1) for the class selector's selection of DOM nodes.
Three. Proper use of ID selectors and class selectors
  1. ID uniqueness, you cannot set the same ID for multiple DOM. That is, you cannot control multiple DOM nodes by using the ID selector. Although in the test code
    1 <!DOCTYPE HTML>2 <HTML>3 4     <Head>5         <MetaCharSet= "Utf-8">6         <title>ID Selector</title>7         <styletype= "Text/css">8 #bgbox{9 Background-color:#0000FF;Ten             } One         </style> A     </Head> -  -     <Body> the         <DivID= "Bgbox"style= "width:100px;height:100px;"></Div> -         <DivID= "Bgbox"style= "width:200px;height:100px;"></Div> -     </Body> -  + </HTML>

    Found that two div are set to color, but this is not conform to the specification. The ID must be able to uniquely determine the DOM node!!

  3. Use the class selector whenever possible when writing styles, even if the DOM node may appear only once. Because the ID selector has a higher priority than the class selector, it becomes more difficult to control in late-style control. One might ask: can I use the ID selector for the entire application, then there is no priority for the class selector. Theoretically this is possible, but note that the last point--id must be able to uniquely determine the DOM node. If you use the ID selector throughout, then even if the two DOM node styles are exactly the same, then you also have to write the node style two times, if you want to maintain later, then you have to maintain the two code are maintained!!! Greatly increased the cost of maintenance.
  5. Now that you have a class selector, why do you specify an ID selector? In a complete html+css+javascript of the page system, the most use of the ID of a DOM node is JavaScript (because the ID can uniquely determine the DOM node, easy to control), The ID selectors used in CSS typically only add a small number of styles, and more style control for DOM nodes is the use of class selectors, both to produce style overlays and to facilitate later maintenance. Please try to avoid using a large number of ID selectors in CSS
  7. In general, there will be a large number of ID selectors in the CSS, in the case of the--javascript plug-in companion style sheet.

Rational use of ID selectors and class selectors

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
css advanced selectors tutorial advanced css selectors use of abstract class use of static class what use of abstract class state use of anonymous class use of if and

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More