1, class of use
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*#p1{ font-size: 30px; color: green; } #p2{ color: green; text-decoration: underline; } #p3{ font-size: 30px; text-decoration: underline; }*/ .lg{ font-size: 30px; } .lv{ color: green; } .un{ text-decoration: underline; } </style> </head> <body> <!-- 公共类 --> <p id="p1" class="lg lv">张孕康1</p> <p id="p2" class="lv un">张孕康2</p> <p id="p3" class="lg un">张孕康3</p> </body> </html>
2, descendant selectors
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .father .wu{ color: green; } </style> </head> <body> <div class="father"> <p>alex</p> <ul> <li> <p class="wu">wusir</p> </li> </ul> </div> <p class="wu">日天</p> </body> </html>
3, the subband selector
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*.father>p{ color: red; }*/ .father>ul>li{ width: 100px; } .container{ color: red; } </style> </head> <body> <div class="father"> <p>alex</p> <p>alex</p> <p>alex</p> <p>alex</p> <div class="content"> <p>wusir</p> </div> <ul> <li> alex2 <ul> <li>wusir</li> </ul> </li> </ul> </div> <div class="container"> <p>日天</p> </div> </body> </html>
4, attribute selector
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> form input[type='text']{ background-color: red; } form input[type='password']{ background-color: yellow; } form #user{ background-color: green; } </style> </head> <body> <form action=""> <input type="text" id="user"> <input type="password"> </form> </body> </html>
5, the pseudo-class selector
<! DOCTYPE HTML > < HTML lang = "EN" > < head > < Meta charset = "UTF-. 8" > < title > </ title > < style > / * A: hover { Color: # ff6700 } * / / * hate hAte criteria LoVe * / / * color is not accessed a label * / a: Link { color : Green ; } / * color of a label after the visit * / a: visited { Color : Yellow ; } / * color Hover when a label * / a: hover { Color : Red ; } a: Active { Color : Blue ; } span: hover { Color : Red ; font-size : 24px ; Decoration-text : underline ; } .child { the display : none ; } .father:hover .child{ color: red; display: block; } </style> </head> <body> <a href="#">百度一下</a> <span>alex</span> <div class="father"> wusir <p class="child">alex</p> </div> </body> </html>
6, the dummy selector elements
<! DOCTYPE HTML > < HTML lang = "EN" > < head > < Meta charset = "UTF-. 8" > < title > the Document </ title > < style > P: First-Letter { Color : Red ; font-size : 26px ; } / * pseudo-element is certain attributes Content * / / * pseudo-element selector and the latter has a lot layout * / P: before { Content :'$' } P: After { Content : '.' } .Box2 { / * Requirements: This box must be block-level tag span ==> page blocks and no accounts position. Future layout has a lot to * / / * Hide the elements do not take up the position * / / * Run the display: none; * / Run the display : Block ; / * Run the display: none; * / / * Hide the elements occupy the position * / visibility : hidden ; height : 0 ; } </ style > </ head> <body> <p class="box"> <span>alex</span> </p> <span class="box2">alex</span> <div>wusir</div> </body> </html>
7, Box Model
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 200px; height: 200px; background-color: red; padding: 50px; border:Solid Green 10px ; / * margin-left: 50px; * / } </ style > </ head > < body > ! <- width: the width of the content height: the height of the contents of padding: padding border: Border margin: Margin -> < div class = "Box" > </ div > </ body > </ HTML >