今天偷個懶，不長篇大論，分享幾個你可能不知道的 CSS 小知識。 樣式的順序 CSS 代碼： HTML 代碼： HTML 代碼： HTML 代碼： HTML 代碼： 記得之前這是一道比較火的 CSS 考題，當時好像是有不少的人答錯（30% 以上） 答案你們應該是知道的。 可以這樣提升 CSS 性能 ...
今天偷個懶，不長篇大論，分享幾個你可能不知道的 CSS 小知識。
樣式的順序
CSS 代碼：
HTML 代碼：
記得之前這是一道比較火的 CSS 考題，當時好像是有不少的人答錯（30% 以上）
答案你們應該是知道的。
可以這樣提升 CSS 性能
後代選擇器
樣式選擇器中間的空格是什麼？它的名字是 —— 後代選擇器。
為什麼會更消耗性能呢?
因為瀏覽器首先會找到所有p標簽，然後再向上查找包含class為div標簽。這樣一來如果代碼中有很多p標簽，無疑是會做很多重覆工作的。
所以可以減少使用 HTML 標簽來定義 CSS 的方式，換成使用具體的class。
瀏覽器會從右到左解析 CSS 選擇器：
瀏覽器會對上面的例子做如下的步驟處理：
首先找到頁面所有的<a>元素
然後向上找到被<p>元素包裹的<a>元素
再向上查找到一直到.content_box的元素
從上面的步驟我們可以看出，越靠右的選擇器越具有唯一性，瀏覽器解析 CSS 屬性的效率就越高。
所以一定換成使用具體的class編寫 CSS 代碼。
自己整理了一套2019最新前端開發資料，需要加qun【四八四。七五七。七六零】
避免 reflow 風險
我們知道修改某些 CSS 屬性會導致整個頁面佈局的重繪( repaint )/重排( reflow )。
repaint 的速度遠快於 reflow，所以避免 reflow 更重要
導致 repaint 和 reflow 的原因
1.DOM 元素的添加、修改、刪除（repaint、reflow）
2.僅僅修改 DOM 元素的字體顏色（repaint，不需要調整佈局）
3.應用新的樣式或者修改任何影響元素外觀的屬性（repaint、reflow）
4.resize，頁面滾動（repaint、reflow）
讀取元素的某些屬性（offsetTop/Left/Width/Height、getComputedStyle、scrollTop/Left/Width/Height、clientTop/Left/Width/Height等）（repaint、reflow）
如果在大量的元素上更改這些屬性，那麼計算和更新他們的位置/大小需要花費很長的時間。
更加消耗性能的 CSS 屬性
有一些 CSS 屬性會比其他屬性消耗能多的性能，即瀏覽器解析這些屬性需要花費更多的時間。
如：border-radius、box-shadow、filter、:nth-child等
當然這些屬性我們經常使用，有些無法避免。要做出適當的取捨。
希望這幾個 CSS 小知識可以對你有所幫助，然後點個贊在走唄。
