1、class的使用
<!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、后代选择器
<!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、子带选择器
<!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、属性选择器
<!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、伪类选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> /*a:hover{ color: #ff6700 }*/ /*爱恨准则 LoVe HAte*/ /*没有被访问的a标签的颜色*/ a:link{ color: green; } /*访问过后的a标签的颜色*/ a:visited{ color: yellow; } /*鼠标悬停的时候a标签的颜色*/ a:hover{ color: red; } a:active{ color: blue; } span:hover{ color: red; font-size: 24px; text-decoration: underline; } .child{ 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、伪元素选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> p:first-letter{ color: red; font-size: 26px; } /*用伪元素 属性一定是content*/ /*伪元素选择器与后面的布局有很大关系*/ p:before{ content: '$' } p:after{ content: '.' } .box2{ /*需求：这个盒子一定是块级标签 span==>块 并且不再页面中占位置。未来与布局有很大关系 */ /*隐藏元素 不占位置*/ /*display: none;*/ display: block; /*display: none;*/ /*隐藏元素 占位置*/ 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、盒模型
<!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: 10px solid green; /*margin-left: 50px;*/ } </style> </head> <body> <!-- 内容的宽度 height:内容的高度 padding:内边距 border:边框 margin:外边距 --> <div class="box"></div> </body> </html>