后代选择器:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*.father p{ color: red; }*/ .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>
子代选择器:
<!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>
组合选择器:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*body{ font-size: 12px; }*/ /**{ padding: 0; margin: 0; }*/ body,div,p,a,span{ padding: 0; margin: 0; } </style> </head> <body> <div> alex </div> <p>alex2</p> <a href="#">日天</a> <span>wusir</span> </body> </html>
交集选择器:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> /*div{ font-size: 30px; } .active{ color: green; } div.active{ text-decoration: underline; }*/ div{ color: red; } div.active{ color: green; } </style> </head> <body> <div class="active">alex</div> </body> </html>
属性选择器:
<!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>
伪类选择器:
<!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>
伪元素选择器:
<!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>
层叠性: 覆盖
(1) 行内 > id > class > 标签
(2) 数 id class 标签
(3) 先选中标签,权重一样,以后设置为主
(4) 如果都是继承来的属性,保证就近原则
(5) 都是继承来的属性,选择的标签一样近,再去数权重
盒模型,浮动
<!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>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding:0; margin: 0; } .top-Bar{ width:100%; height: 40px; background-color: #333; } .container{ width: 1226px; height: 40px; /*background-color: red;*/ margin-right: auto; margin-left: auto; } .top-Bar .top-l{ width: 550px; height: 40px; background-color: green; float: left; } .top-Bar .top-shop{ width: 100px; height: 40px; background-color: yellow; float: right; } .top-Bar .top-info{ width: 200px; height: 40px; background-color: purple; float: right; margin-right: 20px; } </style> </head> <body> <div class="top-Bar"> <div class="container"> <div class="top-l"> </div> <div class="top-shop"></div> <div class="top-info"></div> </div> </div> </body> </html>
常用清除浮动--伪元素清除法:
.clearfix:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both
}
圆:
<html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div{ /*color: transparent;*/ width: 200px; height: 200px; background-color: red; /*制作圆角*/ /*border-radius: 3px;*/ /*border-radius: 100px;*/ border-radius: 50%; } </style> </head> <body> <div> </div> </body> </html>
三角:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div{ /*color: transparent;*/ width: 0px; height: 0px; border-bottom: 20px solid red; border-left: 20px solid transparent; border-right: 20px solid transparent; } </style> </head> <body> <div> </div> </body> </html>