css续集1
2019-05-31 17:34
2041 查看
1.css的继承性
给父级设置一些属性,子级继承了父级的属性,就是css中的继承性 有一些属性可以继承下来:color,font-*,text-*,line-*,文本元素 像一些盒子元素,定位的元素(浮动,绝对定位,固定定位)不能继承
<!DOCTYPE HTML> <html> <head lang='en'> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>学城</title> <style> .father{ font-size: 50px; background: aqua; } .child{ color: deeppink; } </style> </head> <body> <div> <div class="father"> <p class="child">wwwwwwwwwww</p> </div> </div> </body> </html>
2.css的层叠性
2.1层叠性讲解
权重计算方式:id数量 class数量 标签数量 层叠性:权重的标签覆盖掉了权重小的标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*2 0 1*/ #box1 #box2 p{ color: yellow; } /*1 1 1*/ #box2 .wrap3 p{ color: red; } /*1 0 3*/ div div #box3 p{ color: purple; } /*0 3 4*/ div.wrap1 div.wrap2 div.wrap3 p{ color: blue; } </style> </head> <body> <div id='box1' class="wrap1"> <div id="box2" class="wrap2"> <div id="box3" class="wrap3"> <p>再来猜猜我是什么颜色?</p> </div> </div> </div> </body> </html>
当前显示yellow 注释掉yellow,显示red 注释掉red,显示purple 注释掉purple,显示blue
2.2选择器的优先级
1.先看标签元素有没有被选中,如果选中了,就数数(id class 标签数量),谁的权重大,就显示谁的属性。 2.权重一样大,后面设置会覆盖前面的设置。 3.如果属性是继承下来的,权重都是0。则就近原则,谁的描述与显示元素近,就显示谁的属性。 4.如果描述的都是wrap3,则看权重 5.!important设置权重最高,但是!important只影响选中的元素,不影响继承来的权重 6."!important不推荐使用,因为会让代码变得无法维护"
2.2.1验证标签被选中,谁的权重大显示谁的属性
这个在层叠性处已经验证过
2.2.2验证权重一样大,后面设置会覆盖前面的设置。
<!DOCTYPE HTML> <html> <head lang='en'> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>学城</title> <style type="text/css"> /*权重1 1 1 */ #box2 .wrap3 p{ color: red; } /*权重1 1 1 */ .wrap2 #box3 p{ color: deeppink; } </style> </head> <body> <div id='box1' class="wrap1"> <div id="box2" class="wrap2"> <div id="box3" class="wrap3"> <p>再来猜猜我是什么颜色?</p> </div> </div> </div> </body> </html>
2.2.3验证如果属性是继承下来的,权重都是0。则就近原则,谁的描述与显示元素近,就显示谁的属性。
<!DOCTYPE HTML> <html> <head lang='en'> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>学城</title> <style type="text/css"> /*权重都为0,后面设置离显示元素p中的内容更近*/ #box1 .wrap2{ color: red; } .wrap2 #box3{ color: deepskyblue; } </style> </head> <body> <div id='box1' class="wrap1"> <div id="box2" class="wrap2"> <div id="box3" class="wrap3"> <p>再来猜猜我是什么颜色?</p> </div> </div> </div> </body> </html>
2.2.4验证如果描述的都是wrap3,则看权重
<!DOCTYPE HTML> <html> <head lang='en'> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>学城</title> <style type="text/css"> /*权重1 2 0*/ #box1 .wrap2 .wrap3{ color: red; } /*权重1 1 0*/ #box2 .wrap3{ color: deepskyblue; } </style> </head> <body> <div id='box1' class="wrap1"> <div id="box2" class="wrap2"> <div id="box3" class="wrap3"> <p>再来猜猜我是什么颜色?</p> </div> </div> </div> </body> </html>
2.2.5验证!important影响选中的元素
<!DOCTYPE HTML> <html> <head lang='en'> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>学城</title> <style type="text/css"> /*权重1 2 1*/ #box1 .wrap2 .wrap3 p{ color: red; } /*权重1 1 1*/ #box2 .wrap3 p{ color: deepskyblue !important; } </style> </head> <body> <div id='box1' class="wrap1"> <div id="box2" class="wrap2"> <div id="box3" class="wrap3"> <p>再来猜猜我是什么颜色?</p> </div> </div> </div> </body> </html>
2.2.6验证!important只影响选中的元素,不影响继承来的权重
<!DOCTYPE HTML> <html> <head lang='en'> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>学城</title> <style type="text/css"> /*权重都是0,离p标签的距离相同*/ #box1 .wrap2 .wrap3 { color: red !important; } /*权重0*/ #box2 .wrap3 { color: deepskyblue ; } </style> </head> <body> <div id='box1' class="wrap1"> <div id="box2" class="wrap2"> <div id="box3" class="wrap3"> <p>再来猜猜我是什么颜色?</p> </div> </div> </div> </body> </html>
相关文章推荐
- HTML+CSS笔记 CSS入门续集
- 前端逼死强迫症之css续集
- HTML+CSS笔记 CSS进阶续集
- css续集
- 12条鲜有人知的css事实(续集)
- 一步步学Qt,第二天-续集:mysql driver
- CSS+Div面试题
- ispriter自动构建css-sprite
- 一款兼容性很好的标准二级css下拉菜单
- Css 圆角菜单
- IE6下的 CSS 和 HTML 注意事项
- 简单的js+css的输入框自动提示功能实现
- CSS中margin-top对父级元素产生作用的问题
- css 选择器优先级
- jQuery+css实现图片滚动效果(附源码)
- css 兼容大全
- 纯CSS完美实现垂直水平居中的6种方式
- CSS基础(二)
- CSS 水平居中
- CSS之浮动