前言

作为一个前端开发者，html+css+js是必备技能。绝大多数都认为前端的关键是js，确实如此。不过如果css基础掌握的不够好，一些莫名其妙的样式会另前端开发者很头疼，也会浪费很多时间。这里我做一个总结，供自己查阅，也希望可以帮助到一些人。

1、css三大特性——层叠、优先级、继承

当页面上有多个规则作用于同一个元素的时候，这些规则可能会冲突，那么最后起作用的是哪个规则呢？

webp

这个规则就叫做层叠，它是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来追踪这些属性