标签：utf-8 important doctype ima body 作者 head 继承 绝对定位
css中所谓的继承，就是子集继承父级的属性。
可以继承的属性：color、font-xxx、text-xxx、line-xxx。（主要是文本级的标签元素）
但是，像一些盒子元素属性，定位的元素（浮动、绝对定位、固定定位）不能继承。
层叠性：权重大的标签覆盖了权重小的标签。
权重：谁的权重大，浏览器就显示谁的属性
那到底权重怎么判断呢？
首先，看标签有没有被选中，如果都被选中了，比较权重（通过id class 标签的数量），谁的权重大就显示谁的属性；权重一样大，后来者居上。
其次，没有选中的标签权重为0，没法跟选中的标签相比。
如果标签都没有被选中，谁离得近就显示谁的属性，如果一样近，再比权重。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>流浪者</title> 6 <style> 7 #box1 #box2 p{ 8 color: red; 9 } 10 #box1 .wrap2 p{ 11 color: yellow; 12 } 13 div div #box3 p{ 14 color: green; 15 } 16 div.wrap1 div.wrap2 div.wrap3 p{ 17 color: blue; 18 } 19 </style> 20 21 </head> 22 <body> 23 24 <div id=‘box1‘ class="wrap1"> 25 <div id="box2" class="wrap2"> 26 <div id="box3" class="wrap3"> 27 <p>猜猜我是什么颜色</p> 28 </div> 29 </div> 30 </div> 31 32 </body> 33 </html>
数数的时候，数的是id class 标签 的数量，遵循id>class>标签
后来者居上。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>流浪者</title> 6 <style> 7 #box1 .wrap3 p{ 8 color: red; 9 } 10 #box1 .wrap2 p{ 11 color: yellow; 12 } 13 14 </style> 15 16 </head> 17 <body> 18 19 <div id=‘box1‘ class="wrap1"> 20 <div id="box2" class="wrap2"> 21 <div id="box3" class="wrap3"> 22 <p>猜猜我是什么颜色</p> 23 </div> 24 </div> 25 </div> 26 27 </body> 28 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>流浪者</title> 6 <style> 7 #box1 #box2 .wrap3{ 8 color: red; 9 } 10 #box1 .wrap2 p{ 11 color: yellow; 12 } 13 14 </style> 15 16 </head> 17 <body> 18 19 <div id=‘box1‘ class="wrap1"> 20 <div id="box2" class="wrap2"> 21 <div id="box3" class="wrap3"> 22 <p>猜猜我是什么颜色</p> 23 </div> 24 </div> 25 </div> 26 27 </body> 28 </html>
采用就近原则，谁离预选中标签近，就显示谁的属性。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>流浪者</title> 6 <style> 7 #box1 #box2 .wrap3{ 8 color: red; 9 } 10 #box1 .wrap2{ 11 color: yellow; 12 } 13 14 </style> 15 16 </head> 17 <body> 18 19 <div id=‘box1‘ class="wrap1"> 20 <div id="box2" class="wrap2"> 21 <div id="box3" class="wrap3"> 22 <p>猜猜我是什么颜色</p> 23 </div> 24 </div> 25 </div> 26 27 </body> 28 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>流浪者</title> 6 <style> 7 #box1 #box2 .wrap3{ 8 color: red; 9 } 10 #box1 .wrap2 .wrap3{ 11 color: yellow; 12 } 13 14 </style> 15 16 </head> 17 <body> 18 19 <div id=‘box1‘ class="wrap1"> 20 <div id="box2" class="wrap2"> 21 <div id="box3" class="wrap3"> 22 <p>猜猜我是什么颜色</p> 23 </div> 24 </div> 25 </div> 26 27 </body> 28 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>流浪者</title> 6 <style> 7 #box1 #box2 .wrap3{ 8 color: red; 9 } 10 #box1 .wrap2 .wrap3{ 11 color: yellow !important; 12 } 13 14 </style> 15 16 </head> 17 <body> 18 19 <div id=‘box1‘ class="wrap1"> 20 <div id="box2" class="wrap2"> 21 <div id="box3" class="wrap3"> 22 <p>猜猜我是什么颜色</p> 23 </div> 24 </div> 25 </div> 26 27 </body> 28 </html>
作者：流浪者
日期：2019-08-31
标签：utf-8 important doctype ima body 作者 head 继承 绝对定位
原文地址：https://www.cnblogs.com/897463196-a/p/11438099.html
