CSS tag syntax: Explain the relationship selector in the select character

Article Introduction: CSS Tag syntax: Explain the relationship selector in the selector.

I believe everyone is not unfamiliar with CSS selectors, the selector contains: element selector, relationship selector, attribute selector, pseudo class selector, pseudo object selector. Among the many selectors, we can choose the right selection character according to our own needs more flexibility to write the style, achieve maximum quality and efficiency.

Today we will introduce the relationship selector in the next selector, "relationship" This is a first-order event, we have to understand that this can be more efficient. Otherwise in the CSS you have to suffer, haha. The relationship selector has four categories: contains a selector, a child selector, a neighboring selector, and a sibling selector. The next one is to introduce you. In particular here, we usually use the most common is the inclusion of the selector, why we are accustomed to this? Because in the IE6 browser, only the inclusion selector is supported, and none of the others is supported . In the past (now a little changed) IE6 is the protagonist of the browser market, user coverage is very high, so for those IE6 do not support, it is inevitable that we rarely use even the phenomenon. But remember in an article that now HTML5/CSS3 is a trend in the future, and HTML5/CSS3 will focus on the use of tags that we mistakenly thought were useless. Perhaps one day, IE6 real, no longer toss the test of us, those we mistakenly think that no use of the label syntax will set off a CSS efficiency revolution. Haha, purely personal fantasy. Please do not be as true as pearls.

Include selector (E F)

Grammar:
E f{Srules}
Description
Select all f elements that are contained by the E element.
Example:

  

	
   
 Project list 1
	
   
 project list 2
	
   
 Project List 3
	
   
 project list 4

  
 
Output Picture:
 
 
Output results:ul Li said under the UL all the Li will have a role, as long as it is the UL of Li will work.
 
Sub-selector (e>f)
 
Grammar:
e>f{Srules}
Description
Select all of the child element f as the E element.
Example:
 


   

	
    
  list item 1 
     
 
      
 Project list 1.1
 
      
 Project list 1.2
 
     
 
	
    
  List items 2 
     
 
      
 Project list 2.1
 
      
 Project List 2.2
 
     
 
	
    
 List items 3
	
    
 List Items 4

   
 
Output Picture:
 
 
Output Description: . Test > li > A indicates the effect of a tag under the LI tag under selector test. Only belong to this relationship will work, we can see from the above examples, some LI elements below there are UL Li's selector, but it will not play a role. This shows that the child selector provides finer control than the containing selector. In conjunction with the above two examples we can also conclude that the depth and breadth of the inclusion selector exceeds the child object selector, and that the child object selector is more specific and unique than the containing selection Fu Qiang . This is the difference between a selector and a child selector , which is a more confusing place.
 
Adjacent selector (e+f)
 
Grammar:
e+f{Srules}
Description
The selection clings to the F element behind the E element.
Example:
 


    

	
     
 title: Jue Front-End 
	
     
 subtitle: Enjoy Web front-end development and user experience design fun 
	
     
 subtitle: Enjoy the fun of Web front-end development and user experience design 
	
     
 title: Jue Front-End 
	
     
 subtitle: Enjoy the fun of Web front-end development and user experience design 
	
     
 title: Jue Front-End 
	
     
 subtitle: Enjoy Web front-end development and user experience design fun 
	
     
 subtitle: Enjoy the fun of Web front-end development and user experience design 

    
 
Output Picture:
 
 
Output Description:p+p means that only after the P element is attached to another P element will the second P element begin to function. That is, only the two P elements in the structure play a role, and if the 
 structure does not have any effect on any of the labels, Because the P label does not form more than two (including two) consecutive.
 
Brother Selector (E~F)
 
Grammar:
e~f{Srules}
Description
Select all of the sibling elements F behind the E element.
 


     

	
      
 title: Jue Front-End 
	
      
 subtitle: Enjoy Web front-end development and user experience design fun 
	
      
 Subtitle: Enjoy the fun of Web front-end development and user experience design 
	
      
 title: Jue Front-End 
	
      
 subtitle: Enjoy the fun of Web front-end development and user experience design 
	
      
 title: Jue Front-End 
	
      
 subtitle: Enjoy Web front-end development and user experience design fun 
	
      
 subtitle: Enjoy the fun of Web front-end development and user experience design 

     
 
Output Picture:
 
 
Output Description:p~p means that as soon as the first P element appears, the following P elements will play a role (i.e., in a struct, the second occurrence of the P element will play a role). If the selector is set to P~p~p, then the same is true for the third (including the third) P element to begin the check-in function.
 
Note: It is recommended that you can change the style selector  inside of the above example randomly, and then test to see the results of the output. Only if you do the experiment, you can remember more firmly.
 
As illustrated above, we have already learned the use of various relational selectors. So how do we use these selectors in our daily lives? It depends on the ingenuity of everyone. Perhaps in the future will write some use these selectors to make some effect, and everyone to study and discuss. Reasonable and effective use, not only can improve our code quality but also greatly improve our efficiency.