前言
作为一个前端开发者，html+css+js是必备技能。绝大多数都认为前端的关键是js，确实如此。不过如果css基础掌握的不够好，一些莫名其妙的样式会另前端开发者很头疼，也会浪费很多时间。这里我做一个总结，供自己查阅，也希望可以帮助到一些人。
1、css三大特性——层叠、优先级、继承
当页面上有多个规则作用于同一个元素的时候，这些规则可能会冲突，那么最后起作用的是哪个规则呢？
这个规则就叫做层叠，它是css起作用的基础部分。当规则冲突的时候，层叠考虑三件事情：
1.样式表的起源（Stylesheet origin）——这些样式将会与浏览器的默认样式一起生效
2.选择器的优先级（Selector specificity）——哪个选择器的优先级最高
3.资源顺序（Source order）——在样式表中声明样式的顺序
1.1 样式表的起源
其实<h1>到<h6>，<p><ul><ol>这些标签浏览器都会给到一个默认的字体大小、颜色等值，不过我们自定义的样式优先级会比浏览器的样式高。这就是为什么当我们不写<h1><p>之类相关的样式，这些标签内仍然会有字体颜色、大小、左间距的原因。
1.2 选择器的优先级
如果不了解css选择器的优先级，可能会被css覆盖、css不生效之类的问题一直困扰着。
！important>行内样式>ID选择器>类选择器>标签>继承>浏览器默认属性
可以认为浏览器的默认属性权重为0，继承为1，标签为10，类选择器100，依次乘10
1.3 资源顺序
当优先级相同的时候，后写的会覆盖先写的样式。
1.4 继承
当一个元素没有属性值的时候，它可以从其祖先元素继承一个值。当然并不是所有的属性值都可以继承，可以继承的主要是与文本相关的属性： color , font , font-family , font-size , font-weight , font-variant ,font-style , line-height , letter-spacing , text-align , text-indent , text-transform ,white-space , word-spacing
还有一些其他的属性也可以继承，比如列表属性: list-style , list-style-type , list-style-position , list-style-image。表格边框属性：border-collapse , border-spacing.
我们最经常使用的一种方式就是在<body>标签上使用font相关的属性，其他的后代元素都将默认继承这个值。
我们要学会使用devtools来追踪这些属性
未完待续~
作者：海阔天空的远方
链接：https://www.jianshu.com/p/03b5515fbd67
共同学习，写下你的评论
评论加载中...
作者其他优质文章
