03-css的继承性和层叠性
Posted 897463196-a
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了03-css的继承性和层叠性相关的知识，希望对你有一定的参考价值。
一、继承性
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>
!important设置权重为无限大
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
以上是关于03-css的继承性和层叠性的主要内容，如果未能解决你的问题，请参考以下文章
详解CSS三大特性之层叠性继承性和重要性——Web前端系列学习笔记
详解CSS三大特性之层叠性继承性和重要性——Web前端系列学习笔记