一、继承。
css中的继承是子元素从父元素中获得样式，可以理解为，父元素有什么样式，子元素不设置也有同样的样式(一些标签除外)。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>继承</title> <style type="text/css"> .div1{ color:red; } </style> </head> <body> <div class="div1"> <div>神仙姐姐</div> </div> </body> </html>
上面的例子中我们可以看到，我们并没有给子div设置样式，但是它的文字同样是变了颜色的，这就是从父元素中继承过来的样式。
需要注意的是，h标签和a标签不会继承父元素样式，需要单独给它们设置样式。
二、层叠。
也可以说是覆盖。就是后面的样式把前面的样式给盖住不显示。
比如：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>继承</title> <style type="text/css"> .div1{ color:red; } .div1{ color:black; } </style> </head> <body> <div class="div1"> <div>卡特琳娜</div> </div> </body> </html>
我们可以看到，两个样式都起作用了，但是后面的把前面的给盖住了，所以就显示后面写的样式，为什么不是先写的把后面写的盖住呢？这是因为浏览器在解析页面的时候是从上到下一行一行读代码的，所以后面读到的会把前面的覆盖掉。
三、优先级。
如果一个元素，用元素名设置了样式，然后又给它设置了class和id，那么这时候会显示什么样式呢？
这就是要涉及到优先级的问题了。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>优先级</title> <style type="text/css"> div{ color:red; } .div1{ color:black; } #div1{ color:blue; } </style> </head> <body> <div class="div1" id="div1" style="color: #00FF00"> 卡特琳娜 </div> </body> </html>
现在我们写了四个样式，都是作用在同一个div上，那么，最终显示的文字是什么颜色呢？
可以看到，写在元素上的行内样式是优先级最高的，其它的样式都被它覆盖了。
样式的优先级：!important > 行内样式 >id选择器 > class选择器 > 标签选择器 > 通配符 * > 继承 > 默认样式。
important 使用方法：就是在样式后面加上！important;就能把优先级调到最高。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>优先级</title> <style type="text/css"> .div1{ color:red !important; } #div1{ color:blue; } </style> </head> <body> <div class="div1" id="div1">卡特琳娜</div> </body> </html>
本来因为有id存在是要显示蓝色的，但是我们给class样式后面加上了important。所以直接将优先级调到了最高。显示红色。
我在网上看到，有人说它们的优先级是：标签选择器是1，类选择器是10，id选择器是100,行内样式是1000.
反正我不理为什么是10倍，我自己没测试出来。
权重：
所谓的权重就是当有好多样式都作用在一个元素上的时候，元素会按照什么样的方式来显示样式。
权重有个公式是：（!important，id选择器，类选择器，标签选择器）
这个公式就是看作用在同一元素上的样式个数，从左到右是从小到大。
如：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } .div1{ color:red; } #div1{ color:blue; } </style> </head> <body> <div class="div1" id="div1">卡特琳娜</div> </body> </html>
最终结果显示蓝色，按我们的公式来算的话就是：
第一个样式的权重是：（0，1，0，0）
第二个样式的权重是：（0，0，1，0）
这个公式就跟我们的数字十进制一样，把id位可以看成百位，把class位可以看成十位，100比10大，所以……。我明白了，原来上面说的1，10，100，1000是这样来的。（不对呀，从标签选择器进位到class要255才进一的呀，就这么理解吧。）
再看一个例子：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } div .div2{ color:red; } .div2{ color:blue; } </style> </head> <body> <div class="div1" id="div1"> <div class="div2" id="div2">卡特琳娜</div> </div> </body> </html>
最终显示的是第一个样式，颜色红色，按我们的公式来看就可以知道：
第一个权重是：（0，0，1，1）
第二个权重是：（0，0，1，0）
所以，如果想看一个元素最终显示什么样式，要看它的权重是多少。