继承性：
面向对象语言都会存在继承的概念，在面向对象语言中，继承的特点：继承了父类的属性和方法，CSS也有继承性，但是只有属性。
继承：给父级设置一些属性，子级会继承该父级的属性，这就是CSS中的继承。
可以继承的属性：color，font-*，text-*，line-*。主要是文本级的标签元素。
像一些盒子元素，定位的元素，就不能继承。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>继承性和层叠性</title> <style> /*给.d2设置颜色，p会继承颜色*/ .d1 .d2{ color: red; } </style> </head> <body> <div class="d1"> <div class="d2"> <p>你好</p> </div> </div> </body> </html>
层叠性：
权重大的标签会覆盖掉权重小的标签。
id>class>标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>层叠性</title> <style> #box{ color: red; } .p1{ color: green; } p{ color: yellow; } </style> </head> <body> <p id="box" class="p1">你好</p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /* #box1 #box2 { color: red; } #box2 #box3 { color: pink; } div div #box3 { color: black; } div div #box3 { color: blue } div.wrap1 div.wrap2 div.wrap3{ color: green; }*/ #box2 #box3 { color: yellow; } .wrap2 .wrap3 { color: red; } </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>
总结：先找哪个找的离目标最近，如果一样近，就先比较id数量，若id数量一致，再比较类数量。
没有选中标签元素，权重都是0，遵循就近原则。
important的使用：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box1 .wrap2 { color: yellow !important; } .wrap1 #box2 { color: red; } </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>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box1 .wrap2 { color: yellow !important; } .wrap1 #box2 { color: red; } </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>
在同级的情况下，（!important）可以将权重设置为无限大！
!important 不影响继承来的权重，只影响选中的元素。不要随便使用!important,因为使用它会影响页面的布局