我們知道，CSS（層疊樣式表）是一種用來控制HTML文檔外觀和樣式的語言。在CSS中，一個元素的樣式是由它的所有規則集合（包括元素選擇器、類選擇器、ID選擇器、偽類等）組成的。這些規則集之間的優先級被稱為層級。那么，如何查看CSS頁面的層級呢？
我們可以使用瀏覽器的開發者工具來查看一個頁面的CSS層級。以下是具體操作：
1. 打開Chrome瀏覽器并進入你要查看的頁面。
2. 右鍵點擊頁面上的元素，并選擇“檢查”。這將打開Chrome開發者工具。
3. 在開發者工具中，點擊頁面元素的“Styles”標簽。這將顯示與該元素相關的所有CSS規則和屬性。
4. 在“Styles”面板中，你將看到每個CSS規則集的層級。具有高優先級的規則將覆蓋具有低優先級的規則。注意，所有規則的權重都是由元素選擇器、類選擇器、ID選擇器、偽類以及其他規則集等決定的。
以下是一個示例，演示如何查看CSS層級：
```
Hello World!
/* css代碼 */
.my-div {
color: red;
}
div {
color: blue;
}
```
在這個示例中，我們為`div`元素設置了兩個規則集。`.my-div`類選擇器具有更高的優先級，因此文本“Hello World!”將顯示為紅色。
通過使用Chrome開發者工具，我們可以輕松地查看頁面上每個元素的CSS層級，以便在需要時進行更改或調試。