CSS的编码规范和三大特性

通常我们有一些CSS默认编码规范,并不是不按这个写,浏览器认不出来,浏览器比你想象的强大,但是按照编码规范写代码体现了专业性。

CSS编码规范

格式规范

  • 选择器和后面的”{“大括号之间要有一个空格
  • 属性名和”:”冒号之间没有空格,”:”冒号和属性值之间有一个空格,结尾有”;”分号,且无空格分隔
  • CSS的编码规范和三大特性

选择器规范

  • 当选择器是并集选择器时,每个并集选择器独占一行
  • 后代\子代选择器不建议超过5层;在能达到选择且层数可控的条件下,优先使用子代选择器
  • CSS的编码规范和三大特性

属性的规范

  • 每个属性自己单起一行

CSS的三大特性

两个选择器针对同一个元素,设定同一个CSS属性。如何解决冲突呢?

CSS层叠性

  • 两个选择器选到了同一个元素,并且对同一个CSS属性进行设定,那么后定义的CSS属性将覆盖先前定义的CSS属性
  • 如果是针对不同的CSS属性进行设定,互不影响
  • 如果有些CSS属性冲突,有些不冲突,那么冲突的层叠,不冲突的互不影响

CSS的继承性

  • 一个元素的CSS属性可以继承自其父亲或者祖辈的CSS属性
  • 如果多个级别的祖辈元素对同一个CSS属性进行了设定,那么采取就近原则
  • 只有一部分的CSS属性是可以继承的。 常用的可继承的CSS属性:字体,color,line-height,text-align,text-indent

CSS优先级

  • 原则
  1. 如果优先级不同,高优先级的选择器将覆盖低优先级的选择器的CSS属性
  2. 如果优先级相同,定义在后的选择器将覆盖定义在先的选择器的CSS属性
  • 优先级(贡献值)的计算方法
  1. *,继承 = 0,0,0,0
  2. 元素(标签)= 0,0,0,1
  3. 类,伪类 = 0,0,1,0
  4. ID = 0,1,0,0
  5. 行内 = 1,0,0,0
  6. !important = ∞
  7. 复合的选择器的优先级    把所有出现的单个选择器的优先级进行累加,不进位

CSS的编码规范和三大特性

案例:

CSS的编码规范和三大特性

本站技术原创文章,是由作者:常春 创作,如若转载请注明原文及出处:https://www.aiyouseo.com/jianzhan/1562.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注