CSS selector and css3 Selector

CSS selector and css3 Selector
I. CSS basic Selector

1. Tag Selector

   
 
 

  
  
 
   
 
    
A
 
    
<A href = "#"> word <a>
 
   
 
   
 
    
P
 
    
<P> p Paragraph </p>
 
   
 
   
 
    
H1
 
    
<H1> title text  
   
 
  
 
 
 

2. ID Selector

   
 
 

  
  
 
   
 
    
#p1
 
    
<p id=”p1”></p>
 
   
 
   
 
    
#p2
 
    
<p id=”p2”></p>
 
   
 
  
 
 
 

3. class selector

   
 
 

  
  
 
   
 
    
.myclass
 
    
<p class=”myclass”></p>
 
   
 
   
 
    
.myclass2
 
    
<p class=”myclass”></p>
 
   
 
  
 
 
 

Ii. CSS compound Selector

1. Intersection Selector

   
The intersection selector is composed of two directly connected selectors. The result is the intersection of the selected element ranges. The first must be the tag selector, and the second must be the category selector or ID selector. The two selectors do not have spaces and must be written consecutively.
In this way, the selector selects the elements that meet both the preceding and following definitions, that is, the tag type defined by the former, and specifies the elements of the latter's category or ID, therefore, it is called the "intersection" selector.
    
 
 

  
  
 
   
 
    
H3.class # id
 
   
 
   
 
    
P. # id. class
 
   
 
   
 
    
A. class # id
 
   
 
  
 
 
 

2. Union Selector

   
Corresponds to the intersection selector. The Union selector is composed of multiple selectors connected by commas.
    
 
 

  
  
 
   
 
    
P,. class, # id
 
   
 
   
 
    
P, a, h1
 
   
 
   
 
    
. Class, p, # id, h1,
 
   
 
   
 
    
# Id,. class, p
 
   
 
  
 
 
 

3. Descendant Selector

   
The syntax of the descendant selector is to write the outer mark in front, the inner mark in the back, and separate it with spaces.
When the tag is nested, the tag of the inner layer is called the descendant of the outer tag.
Note: The influence of the descendant selector is not limited to the "direct descendant" of the element, but also affects its "descendants at all levels ".
    
 
 

  
  
 
   
 
    
P div span
 
   
 
   
 
    
P a div
 
   
 
   
 
    
# Id span
 
   
 
   
 
    
. Class # id span
 
   
 
   
 
    
Div p span
 
   
 
  
 
 
 

4. Sub-Selector

   
Only the selector that affects the direct descendant. The difference is that
    
 
 

  
  
 
   
 
    
P> span
 
   
 
   
 
    
P> div> span
 
   
 
   
 
    
P> a> div
 
   
 
   
 
    
# Id> span
 
   
 
   
 
    
. Class> # id> span
 
   
 
   
 
    
Div> p
 
   
 
  
 
 
 

Iii. Inheritance and cascade of CSS

1. inherited features

   
CSS inheritance means that the child tag inherits all style styles of the parent tag and can be modified based on the style of the parent tag to generate a new style, the style of the Child tag does not affect the parent tag.
The inheritance of CSS runs through the whole CSS design. Each tag follows the concept of CSS inheritance.
When using the descendant selector, there is no need to write all the labels at each level. It can be abbreviated.
Ul li ul li {color: Green; font-weight: bold ;}
Li {color: Green; font-weight: bold ;}
The above two statements share the same results.
 

2. Stack features

   
The cascade feature of CSS is very important, but note that it is essential not to be confused with the "inheritance" described above. In fact, stack can be simply understood as a "Conflict" solution.
    
Summary: Priority rules can be expressed
Intra-row style> ID style> category style> markup style
The more special the style, the higher the priority.
 

3. Style Classification

   
Inline Style)
Style = ""
        
       
Embedded Style
<Style type = "text/css"> </style>
      
       
External Style
<Link type = "text/css" href = "URL" rel = "stylesheet"/>
      
       
Import Style
@ Import url (filename );
      
       
Priority
In-row> external (Link)> embedded> Import
Proximity Principle
   

What are the CSS selectors and how to choose to use them in Webpage Design?

<Div id = "demo">
<Div class = "inner">
<P> <a href = "#"> link </a> </p>
<P> <input type = "checkbox" name = "" id = "/> </p>
</Div>
</Div>
Class selector. inner {width: 100px ;}
Id selector # demo {width: 100px ;}
Tag selector p {width: 100px ;}
Descendant selector p a {color: # f60 ;}
Pseudo class selector a: hover {color: # f00 ;}
Pseudo element selector a: after {clear: both ;}
Attribute selector input [type = checkbox] {margin-left: 10px ;}
Css3 Selector
Due to ie problems, the first four selectors are commonly used.

What are the CSS selectors and how to choose to use them in Webpage Design?

<Div id = "demo">
<Div class = "inner">
<P> <a href = "#"> link </a> </p>
<P> <input type = "checkbox" name = "" id = "/> </p>
</Div>
</Div>
Class selector. inner {width: 100px ;}
Id selector # demo {width: 100px ;}
Tag selector p {width: 100px ;}
Descendant selector p a {color: # f60 ;}
Pseudo class selector a: hover {color: # f00 ;}
Pseudo element selector a: after {clear: both ;}
Attribute selector input [type = checkbox] {margin-left: 10px ;}
Css3 Selector
Due to ie problems, the first four selectors are commonly used.