css的层叠性,继承性,重要性,css的继承性和层叠性是什么含义

1.css属性的继承

　　 CSS中的一些属性是可继承的。什么是属性的继承？

　　如果一个元素没有设置某些属性的值，它将遵循(继承)其父元素的属性值。当然，如果一个元素有自己的属性值集，它会使用自己的。例如，颜色、字体大小和其他属性可以继承。如何检查有些属性是从父元素继承的还是自己设置的？(可以通过浏览器调试工具查看)示例代码如下：为父div设置字体样式；盒子{颜色：红色；字体大小：16px}div class=box span我是span element /span/div浏览器运行结果：span元素内容的字体颜色变为红色，大小变为16px，logo样式继承自div.box；

　　然后可以参考W3C官网或者MDN了解哪些样式可以继承哪些样式不可以继承，具体属性是否可以继承。以MDN为例：输入要查找的属性(颜色可以继承，宽度不可以)

　　无法继承的属性可以通过使用inherit属性值来强制继承。注意：css属性继承计算的值，而不是在写属性时指定的值(即文字值)。

　　示例代码：

　　. box1 {宽度：1000px高度：150px背景色：# f00}.box2 {宽度：50%；/* 500 px */height:100 px；背景色：# 00f} . box 3 { width:inherit；/* 500px */高度：50px背景色：# 0f0} div class= box 1 div class= box 2 div class= box 3 /div/div运行结果：div.box3是500px通过直接继承div.box2计算；

2.css属性的层叠

　　 css全名(层叠样式表)，允许多个同名的css属性层叠在同一个元素上，层叠最终结果，只有一个CSS属性生效。

　　浏览器的调试工具清楚地显示了哪个css属性最终生效。示例代码：

　　#box {颜色：红色；}.容器{颜色：绿色；}div {颜色：蓝色；} div id= box class= container div元素内容/div浏览器运行结果：最终id设置的属性生效；

　　哪个css属性生效，关系到css属性所在环境的优先级。

3.css属性的优先级

　　为什么有时候写的css属性不会产生相应的效果？大概是因为以下几个原因：

　　选择器的优先级太低；选择器没有选择相应的元素；css属性使用不当；元素不支持此css属性；比如span不支持宽度和高度；默认情况下；浏览器版本不兼容；被类似的css属性覆盖，比如字体覆盖字号；(1)解决方法：可以充分利用浏览器的调试工具进行调试和查错，也可以利用css选择器的权重值来解决。

　　(2)为了方便css属性的优先级，可以为css属性所处的环境定义一个权重(weight)。

　　！重要：10000；内嵌样式：1000；Id选择器：100；类选择器，属性选择器，伪类：10；元素选择器和伪元素：1；通配符：0；(3)严格的优先比较方法：

　　从最大权重开始比较每个权重的数字，数字越大优先级越高；如果数字相同，比较下一个较小的权重，以此类推；如果比较后发现所有权值都相同，则采用“邻近原则”；(4)也可以用下表来衡量优先级，用一个四位数的字符串，值从左到右，最大在左，第一级大于第一级，位数之间无小数，级与级之间无超越：

　　选择器权重继承，* 0，0，0，0元素选择器0，0，0，1类选择器，伪类选择器0，0，1，0 id选择器0，1，0，0内联样式1，0，0，0！重要的(无穷大)就是这样。本文对CSS的继承、级联和优先级三大特性进行了介绍。希望对大家的学习有所帮助，也希望大家多多支持。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。