继承性
<body> <div> <p>我是段落</p> <p>我是段落</p> <p>我是段落</p> </div> </body> <style type="text/css"> /* div p { color: red } */ div { color: blue } </style>
打开会发现p的字体也是蓝色的，浏览器的查看说是继承于div
有一些属性，当给自己设置的时候，自己的后代也同时拥有了这个属性，这就是继承性
但是并不是所有的属性都具有继承性
只有以color,text,line,font开头的具有这些特性
继承性从大贯穿到最小的元素
所以，如果我们的页面是统一的文字 字号什么的，我们就可以利用继承性在body标签内统一书写
层叠性
层叠性，就是css处理冲突的能力
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> p { color: red } .pp { color: blue } #para1 { color: blueviolet } </style> </head> <body> <p class="pp" id="para1"> 我是段落 </p> </body>
发现最后的颜色是紫色，术语上讲前两个设置被层叠掉了，就是被覆盖了.
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> #box1 .hezi2 p{ color: red } div div #box3 p { color: green } div.hezi1 div.hezi2 div.hezi3 p { color: blue } </style> </head> <body> <div class="hezi1" id="box1"> <div class="hezi2" id="box2"> <div class="hezi3" id="box3"> <p>我是什么颜色</p> </div> </div> </div> </body>
会发现这个颜色是红色的，这个要怎么分析呢？
我们要分别数一下id选择器的数量 类选择器的数量，标签选择器的数量。
id的数量 类的数量 标签的数量 权重一次降低，即优先级一次降低
层叠性不进位
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> div div div div div div { color: red } .haha { color: blue } </style> </head> <body> <!-- 层叠性不进位 --> <div> <div> <div> <div> <div> <div> <div> <div> <p class="haha">文字</p> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html>
是蓝色的。优先级低的就算再多也不会影响优先级高的。实际上是能够影响的，256个标签才抵得上一个类标签，但是没有实战意义。
如果权重一样，谁写在后面听谁的。
权重注意点:当所有的选择器直接选择上标签时 才使用权重计算。继承性的属性权重为0
important 关键字
如果权重没有别人高，又想使自己起作用，可以使用important关键字 语法: k:v !important 代表这个权重是无限大。
!important 需要注意的
!important 提升的是一个属性 而不是一个选择器
p {
color: red !important;
font-size: 60px;
}
就是只针对 color有用 对font-size没有用
!important无法提升继承的权重，该是0还是0
!important 不影响就近原则（如果都是在继承的情况下）如果离的一样近 还是会比权重，这种情况下这个属行
平常情况下 !important 不会使用，因为会让CSS变得很乱，只是作为一个知识点。