css
CSS思维导图：https://www.processon.com/view/link/5c5ffd0ae4b0f0908a8ffad5
css 权重
- 权重一样大的时候 后面的优先级要高
- 继承来的属性的权重为0 跟选中的标签没有可比性
- !important 设置选中的标签 权重无限大
- box #wrap2 .box3 p {*/ /*color: red !important;*/ /*}*/ /*#wrap #wrap2 .box3 p{*/ /*color: #cc6600;*/ /*}
- 都是继承来 距离选中的标签 描述越近的 权重越大
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*1 0 0*/ #wrap{ color: red; } /*0 1 0*/ .box{ color: green; } /*0 0 1*/ div{ color: blue; } </style> </head> <body> <div class="box" id="wrap"> 小瓶盖儿 </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*权重大的优先级 要高于权重小*/ /* 1 2 1*/ .box #wrap2 .box3 p{ color: darkgreen; } /*1 1 2*/ .box #wrap2 div p { color: red; } /*2 0 1*/ #wrap2 #wrap3 p{ color: #cc6600; } /*1000 >100>10>1*/ </style> </head> <body> <div class="box" id="wrap"> <div class="box2" id="wrap2"> <div class="box3" id="wrap3"> <p style="color: #6a6aff">小萍盖儿</p> </div> </div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*权重一样大的时候 后面的优先级要高*/ /*继承来的属性的权重为0 跟选中的标签没有可比性*/ /*!important 设置选中的标签 权重无限大*/ /*.box #wrap2 .box3 p {*/ /*color: red !important;*/ /*}*/ /*#wrap #wrap2 .box3 p{*/ /*color: #cc6600;*/ /*}*/ /*都是继承来 距离选中的标签 描述越近的 权重越大*/ #wrap #wrap2 #wrap3{ color: deeppink; } #wrap .box2 #wrap3{ color: blue; } </style> </head> <body> <div class="box" id="wrap"> <div class="box2" id="wrap2"> <div class="box3" id="wrap3"> <p>小瓶盖儿</p> </div> </div> </div> </body> </html>
