CSS特性

CSS属性的继承

• CSS中有些属性是可继承的，何为属性的继承？
  一个元素如果没有设置某属性的值，就会跟随父元素的值
  当然，一个元素如果有设置某属性的值，就使用自己设置的值
  比如color、font-size等属性都是可以继承的
  究竟哪些属性可以继承，不用死记硬背，用多了自然熟练。而且可以随时查阅官方文档找到答案
  不能继承的属性，一般可以使用inherit值强制继承
  浏览器的开发者工具也会标识出哪些样式是继承过来的

继承的注意点

• CSS属性继承的是计算值，并不是当初编写属性时的指定值（字面值）

  
  image.png

CSS属性的层叠

• CSS允许多个相同名字的CSS属性层叠同在一个元素上

  • 层叠后的结果是：只有一个CSS属性会生效

• 浏览器的开发者工具非常清晰地显示了哪个CSS属性会生效

  
  image.png

按照经验，为了方便比较CSS属性的优先级，可以给CSS属性所处的环境定义一个权值（权重）
!important：10000
内联样式：1000
id选择器：100
类选择器、属性选择器、伪类：10
元素选择器、伪元素：1
通配符：0

比较优先级的严谨方法
从权值最大的开始比较每一种权值的数量多少，数量多的则优先级高，即可结束比较
如果数量相同，比较下一个较小的权值，以此类推
如果所有权值比较完毕后，发现数量都相同，就采取“就近原则”

• 总结：选择器的针对性越强，优先级越高

image.png
image.png

• 为何有时候编写的CSS属性不好使，有可能是因为
  选择器的优先级太低
  选择器没选中对应的元素
  CSS属性的使用形式不对
  元素不支持此CSS属性，比如span默认是不支持width和height的
  浏览器不支持此CSS属性，比如旧版本的浏览器不支持CSS3的某些属性
  被同类型的CSS属性覆盖，比如font覆盖font-size

建议
充分利用浏览器的开发者工具进行调试（增加、修改样式）、查错