CSS篇
css选择器
css选择器总结: 语法: 选择符{ 属性:值; } 作用:选中页面上的元素(标签),设置对应的样式 - 基础选择器 + 标签选择器 * 对页面中相同的元素,设置共同的属性 + id选择器 * 任何的元素都可以设置id * id是唯一,并且不能重复,表示选中的是有“特性的元素” + class选择器 * 任何的元素都可以设置类 * 一个元素中可以设置多个类 * 一定要有“归类的概念,公共类的想法”。选中的页面元素,设置相同的属性 - 高级选择器 + 后代 (爸爸的儿子,孙子....) * div p{} + 子代 (亲儿子) * div>p + 组合 * 选择器1,选择器2,选择器3{} + 交集选择器(了解) * 选择器1选择器2{} 指向同一节点 + 伪类选择器 * a标签 - 爱恨准则 LoVe HAte + a:link{} + a:visited{} + a:hover{} + a:active{} 注意::hover可以应用于任何的元素
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/* 标签选择器 */ p{ color: orange; font-size: 14px; font-weight: bold; } /* id选择器 */ #peiqi{ color: green; } #jj{ color: red; } /* 类选择器 */ .active{ color: gray; } .title{ font-size: 30px; }
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/* 后代选择器 */ .wrap a{ color: orange; } /* 子代选择器 */ .wrap>a{ color: purple; } /* 组合选择器 */ h3,span{ color: gray; font-size: 14px; } /* 交集选择器(解决代码冗余) */ /* 选择器1选择器2{样式;} */ h2{ color: red; font-size: 14px; } .active{ font-weight: lighter; font-size: 14px; } /* 指向同一节点--简化 -去除font-size: 14px; */ h2.active{ font-size: 14px; }
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/*爱恨准则 先爱再恨 LoVe HAte*/ /*没有被访问过a的状态*/ a:link{ color: orange; } /*访问过后的a的状态*/ a:visited{ color: green; } /*鼠标悬浮时a的状态*/ a:hover{ color: black; } /*鼠标摁住时a的状态*/ a:active{ color: purple; } span{ color: gray; } span:hover{ color: red; } div:hover{ background-color: green; } div:hover span{ color: white; }
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <title>选择器权重</title> <style type="text/css"> /*数选择器的数量: id选择器 类选择器 标签选择器*/ /*0 1 0*/ .b{ color: purple; } /*0 0 3*/ html body div{ color: red; } /*1 0 0*/ #b{ color: orange; } </style> </head> <body> <div>a</div> <div class="b" id="b" style="color: green;">b</div> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <title>css选择器权重深入</title> <style type="text/css"> /* 0 0 3*/ div div p{ color: yellow; } /*0 0 1*/ p{ color: gray; } /*0 1 0*/ .active{ color: purple; } /*0 1 1*/ div .active{ color: black; } /*0 1 1*/ div div .active{ color: blue; } /*1 2 0*/ .wrap1 #box2 .active{ color: green; } /*2 0 1*/ #box1 #box2 p{ color: red; } /*继承来的属性 它的权重非常低 0*/ #box1 #box2 #box3{ color: orange; } .container{ color: orange; font-size: 14px; } .container ul li { color: #000; font-size: 16px; } </style> </head> <body> <div class="wrap1" id="box1"> <div class="wrap2" id="box2"> <div class="wrap3" id="box3"> <p class="active">MJJ是什么颜色</p> </div> </div> </div> <div class="container"> <ul> <li>小米手机</li> </ul> </div> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <title>!important讲解</title> <style type="text/css"> #a{ color: green !important; } div{ color: purple !important; } </style> </head> <body> <div class="a" id="a">a</div> </body> </html>