Briefly popular css selectors

 

First come here HTML code

1 <div id="div" class="div">
2      <p class="div_P1"></p>
3      <span></span>
4 </div>

Let's look at our simple selector: the id and class, followed by a wildcard as well as property and labels, etc., but these are not commonly used

This is a child we do not, for example, we will

Relations selector is the case: the presence of offspring, brothers, etc., not more than that simple common examples to point

.div> SAPN {    // all progeny selected .div span 

    Color : Red ; 

} 

.div SAPN {    // .div all selected descendants span 

    Color : Red ; 

} 

.div> span, .div> .div_p1 {    / / .div all progeny selected span and .div_p1 

    Color : Red ; 

} 

p + SAPN {    // p behind each selected span 

    Color : Red ; 

}

And our pseudo-class selectors, to a few simple:

span: hover // this is a common property of the label, where not much to say
 { 
    Content : "haha" ; 
} 

span: // After increasing the span tag word haha
 { 
    Content : "haha" ; 
} 

span: before / / haha increase span tag word before
 { 
    Content : "haha" ; 
} 

div span: Child-Nth (. 1) // div is selected here represented by the first child below, inside the brackets can also be expressed even or odd
 { 
    Content : "haha" ; 
} 
div span: type-of-Nth (. 1) // div is selected here represented by following the same type (that is, all the same type of span) of the first child, the brackets may represents even or odd
 { 
    Content : "haha" ; 
} 

.div: Not (.div_P1){     // div In addition to the elements .div_P1 

   Color : Red ; 
}

There is our attribute selectors: This is not to say, is not commonly used

 

Finally, there is a weight problem, weight, then embedded within the line weight is the highest, followed by the id, followed by a class ... and so on, remember these three forward on it.