CSS中可以使用層級的方式來制作頁面樣式。層級定義了樣式的優(yōu)先級，這對于控制頁面樣式非常有用。

在CSS中，每個(gè)元素都有一個(gè)權(quán)重值，根據(jù)權(quán)重值的高低來決定樣式的優(yōu)先級。當(dāng)多個(gè)樣式同時(shí)作用于一個(gè)元素時(shí)，權(quán)重值高的樣式將覆蓋權(quán)重值低的樣式。

以下是權(quán)重值的計(jì)算方法：

• 標(biāo)簽選擇器權(quán)重值為1
• 類選擇器權(quán)重值為10
• ID選擇器權(quán)重值為100
• 內(nèi)聯(lián)樣式權(quán)重值為1000

在使用層級時(shí)，可以通過“空格”、“>”和“+”符號(hào)來表示元素之間的關(guān)系。其中，“空格”表示后代元素，“>”表示子元素，“+”表示相鄰的兄弟元素。

以下是一個(gè)例子：

html           /* 權(quán)重值為0 */
body           /* 權(quán)重值為1 */
.container     /* 權(quán)重值為10 */
.container >div   /* 權(quán)重值為11 */
.container p   /* 權(quán)重值為11 */
.container + div  /* 權(quán)重值為11 */
#content       /* 權(quán)重值為100 */
#content p     /* 權(quán)重值為101 */
#content >p   /* 權(quán)重值為1010 (100 + 10) */
div p          /* 權(quán)重值為2 */

在上述例子中，如果同時(shí)使用了.container、#content和div p三個(gè)選擇器對同一個(gè)元素進(jìn)行樣式設(shè)置，那么#content >p選擇器對應(yīng)的樣式將被優(yōu)先使用，因?yàn)樗臋?quán)重值最高。

除了以上的層級關(guān)系，還可以使用逗號(hào)“,”將多個(gè)選擇器組合起來，這樣它們就會(huì)具有相同的權(quán)重值。

層級關(guān)系雖然能給我們帶來方便，但在實(shí)際開發(fā)中也要注意，不要濫用層級關(guān)系導(dǎo)致樣式表不易維護(hù)。在設(shè)計(jì)樣式時(shí)，應(yīng)該盡量使用簡潔的選擇器，避免冗余的代碼。