1.id selector , wherein the selector value id is unique to each tag
<div id="text1">
css with # text1 {}
2. class selector (class) , there may be a plurality of
<div class="text1"></div>
<div class="text1 text2"></div>
css with .text {}
3. descendant selectors
For example, if the selected <li> </ li> then
<ul>
<li></li>
</ul>
css by: ul li {}
4. sub-element selector , or the number of column (note that only find the next stage, lower stage can not be found)
css using ul> li {}
The intersection of the selector
<ul>
<li class="text"></li>
<li></li>
</ul>
css by: li.text {}
6. Set the selector and
<div></div>
<p></p>
css by: div, p {}
priority:
Inline style> id selector> class selector> tag selector
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <style type="text/css"> 7 .box1{color: aqua;} 8 #box2{ color: blueviolet;} 9 .box3 p .box4{color: Blue ; } 10 div> H3 { Color : DarkSlateGray ; } . 11 </ style > 12 is </ head > 13 is < body > 14 < div class = "box1" > class selector Test </ div > 15 < div ID = "BOX2" > ID selecting test </ div > 16 < div class = "BOX3" > . 17 <p> < Span class = "box4" > descendant selector </ span > </ P > 18 is < H3 > child element selector </ H3 > . 19 </ div > 20 is </ body > 21 is </ HTML >
