权值等级的定义

第一等：代表内联样式，如: style=””，权值为1000。

第二等：代表ID选择器，如：#content，权值为100。

第三等：代表类，伪类和属性选择器，如.content，权值为10。

第四等：代表类型选择器和伪元素选择器，如div p，权值为1。

Ps:通用选择器（*），子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以他们的权值都为0，!important 优先级最高，万不得已的情况下才用。

权重计算

优先规则

权值大的样式会覆盖权值小的样式，上面例子的样式会采用权值最大201的样式，当你乱用!important，特别是后期修改样式的时候，是不是有种心力憔悴电费感觉？

当css前后样式项的权值一样，后面的样式会覆盖前面的样式。

Css 概念

命名风格规范

1 css文件命名：统一为小写的英文字母（尽量少用拼音），如：index.css。

当名字需要组合拼写时，可以在单词间加中杠线（不要用下划线：容易写错）。如：member-report.css。（推荐）

或者统一为驼峰式拼写。如：MemberReport.css (项目启动前统一风格)。

2 样式名（html的class名）：在让人看懂的前提下，尽量语义化或简写。尽量少用拼音，和无语义的缩写 .bt .bd 等； 风格可以统一为小写字母，如：content。当名字需要组合时，可以采用css文件名的规范。

样式的继承

文本样式

列表相关属性

像素化 css

渲染

就是浏览器把HTML代码以css定义的规则显示在浏览器窗口的过程

浏览器对页面呈现的处理流程

回流

当页面的布局发生变化时，浏览器会回过头来重新渲染，这就是页面为什么会慢的一个原因，当一个点的变 化影响了布局，这就会使得要倒回去重新渲染，这个倒回去的过程称为 reflow（回流）。

当页面布局和几何属性改变时就需要回流。下述情况会发生浏览器回流

reflow问题也是可以优化的，减少reflow是很有必要的，比如给图片设定好宽度和高度，这样就可以把图片的占位面积预定好。

重绘

一些元素需要更新属性，而这些属性只是影响元素的外观，风格（景颜色，文字颜色，边框颜色）而不会影响布局，浏览器就会repaint。repaint的速度明显比reflow的速度快。

为了帮助小伙伴们更好的学习WEB前端，技术学派整理了WEB前端的相关学习视频及学习路线图。