Revisit the document structure of CSS

Source: http://limits.cnblogs.com

Let's take a look at some basic HTML pages

1 <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> 2 
Shown below:
Document structure such as:
Particularity:
The weights of the different rules are specified, and the higher weights are preferred when multiple rules are available for the same element.
h1 {color:red;} /* Special =1*/p Em{color:blue;} /* Special =2*/.divclass{color:yellow;} /* Special =10*/p.note Em.dark{color:gray;} /* Special =22*/#id {color:black;} /* Special =100*/
Use !important to identify important rules, such as:p{color:red!important;} , the color:red will have the highest weight, because the rules for declaring this will be higher than the definition of the local style of the visitor ( that is  , the definition within the P tag ), so ! Important should be used with caution. 
Element classification:

 
 

  
  
 
   
Block-level elements (Display:block): Each block-level element starts with a new line, and the subsequent element also requires another line to start the title, paragraph, table, layer,body, etc. are block-level elements;   
 
   
Inline elements (display:inline): inline elementsdo not need to be displayed on new lines, and also do not force subsequent elements to wrap, such as A,em,span, etc. are inline elements, and inline elements can be child elements of any other element; 
 
   
List item (Display:list-item): Only the Li element is the default of this type, and this element behaves like a list;   
 
   
Hidden element (display:none): When an element is set to Display:none , the browser ignores the element completely, and the element will not be displayed or occupy a position. 
 
  
 
 
Revisit the document structure of CSS