内联样式，如: style="..."，权值为1000。
ID选择器，如：#content，权值为0100。
类，伪类、属性选择器，如.content，权值为0010。
类型选择器、伪元素选择器，如div p，权值为0001。
通配符、子选择器、相邻选择器等。如* > +，权值为0000。
继承的样式没有权值
ID #id
class .class
标签 p
属性 [type='text']
伪类 :hover
伪元素 ::first-line
相邻选择器、子代选择器 > +
行间>内部>外部、ID>class>元素
!important 的作用是提升优先级，换句话说。加了这句的样式的优先级是最高的（比内联样式的优先级还高)。
优化css
1.内联CSS能够使浏览器开始页面渲染的时间提前 首次有效绘制
只将渲染首屏内容所需的关键CSS内联到HTML中
2. 异步加载外部CSS
CSS会阻塞渲染，在CSS文件请求、下载、解析完成之前，浏览器将不会渲染任何已处理的内容。
<link rel="preload" href="mystyles.css" as="style" onload="this.rel='stylesheet'">
// 注意，as是必须的。忽略as属性，或者错误的as属性会使preload等同于XHR请求，浏览器不知道加载的是什么内容，因此此类资源加载优先级会非常低。
通过更改某些属性，使得浏览器异步加载CSS文件但不解析，直到加载完成并将修改还原，然后开始解析。
使用preload，比使用不匹配的media方法能够更早地开始加载CSS
3. 文件压缩
构建工具如webpack、gulp/grunt、rollup等也都支持CSS压缩功能。
压缩后的文件能够明显减小，可以大大降低了浏览器的加载时间。
CSS文件压缩通常只会去除无用的空格
4. 去除无用CSS
一种是不同元素或者其他情况下的重复代码，尽可能地提取公共类，减少重复
一种是整个页面内没有生效的CSS代码。
Uncss可以用来移除样式表中的无用CSS，并且支持多文件和JavaScript注入的CSS。
优化css建议型的4个技巧
一. 有选择地使用选择器
CSS选择器的匹配是从右向左进行的
1.保持简单，不要使用嵌套过多过于复杂的选择器。
2.通配符和属性选择器效率最低，需要匹配的元素最多，尽量避免使用。
3.不要使用类选择器和ID选择器修饰元素标签，如h3#markdown-content，这样多此一举，还会降低效率。
4.不要为了追求速度而放弃可读性与可维护性。
二. 减少使用昂贵的属性
所有需要浏览器进行操作或计算的属性相对而言都需要花费更大的代价。
如box-shadow/border-radius/filter/透明度/:nth-child等。
三. 优化重排（回流）与重绘
1.减少重排
改变font-size和font-family
改变元素的内外边距
通过JS改变CSS类
通过JS获取DOM元素的位置相关属性（如width/height/left等）
CSS伪类激活
滚动滚动条或者改变窗口大小
使用Flex时，比使用inline-block和float时重排更快，所以在布局时可以优先考虑Flex。
2.避免不必要的重绘
当元素的外观（如color，background，visibility等属性）发生改变时，会触发重绘。
如页面滚动时触发的hover事件，可以在滚动的时候禁用hover事件，这样页面在滚动时会更加流畅。
3.不要使用@import
1.使用@import引入CSS会影响浏览器的并行下载。
2.多个@import会导致下载顺序紊乱。
排列在@import后面的js文件先于@import下载，并且打乱甚至破坏@import自身的并行下载。
使用link标签
网友评论