什么是CSS階梯？

CSS階梯是一種優化CSS代碼性能的方法。在頁面加載時，會按照CSS規則逐個進行渲染。如果CSS文件中存在大量通用規則，那么瀏覽器便要逐個查詢每一條規則，這樣會導致頁面加載速度緩慢。

對于這個問題，CSS階梯就是為了解決它而誕生的。CSS階梯主要就是將CSS選擇器的規則，按照權重逐漸遞增，從而減少無用的查詢，提高頁面加載速度。

/*通用選擇器，權重為0*/
*{
margin:0;
padding:0;
}
/*元素選擇器， 權重為1*/
p {
font-size: 14px;
}
/*類選擇器， 權重為10*/
.my-class{
color: red;
}
/*ID選擇器， 權重為100*/
#my-id{
background-color: blue;
}

上面的代碼中，*是通用選擇器，它的權重為0，而p元素的選擇器具有權重1，.my-class的選擇器權重為10，#my-id的選擇器權重為100。這樣一來，瀏覽器在渲染頁面時，只需查詢對應的選擇器，就可以快速渲染完整個頁面。

注意，CSS階梯的使用也需要注意，要避免出現不必要的選擇器。因為過多的選擇器會增加渲染時間，反而會影響頁面的性能。