層疊樣式表（CSS）是一種用來(lái)表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語(yǔ)言。它不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。CSS能夠?qū)W(wǎng)頁(yè)中元素位置的排版進(jìn)行像素級(jí)精確控

層疊樣式表（CSS）是一種用來(lái)表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語(yǔ)言。它不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。CSS能夠?qū)W(wǎng)頁(yè)中元素位置的排版進(jìn)行像素級(jí)精確控制，支持幾乎所有的字體字號(hào)樣式，并具有對(duì)網(wǎng)頁(yè)對(duì)象和模型樣式編輯的能力。

當(dāng)一個(gè)標(biāo)簽同時(shí)有多個(gè)選擇器作用時(shí)，那個(gè)選擇器會(huì)生效呢？這就需要引入選擇器權(quán)重的概念了。選擇器權(quán)重決定了樣式規(guī)則的優(yōu)先級(jí)，高權(quán)重的選擇器會(huì)覆蓋低權(quán)重的選擇器。

CSS選擇器權(quán)重值

在CSS中，每個(gè)選擇器都被賦予了一個(gè)權(quán)重值，用于衡量其優(yōu)先級(jí)。下面是常見(jiàn)的選擇器權(quán)重值：

1. 行內(nèi)樣式：權(quán)重值為1000。行內(nèi)樣式是直接寫在HTML標(biāo)簽的style屬性中的樣式，擁有最高的優(yōu)先級(jí)。

2. ID選擇器：權(quán)重值為100。ID選擇器通過(guò)HTML標(biāo)簽的id屬性進(jìn)行選取，具有較高的權(quán)重。

3. 類選擇器：權(quán)重值為10。類選擇器通過(guò)HTML標(biāo)簽的class屬性進(jìn)行選取，權(quán)重次于ID選擇器。

4. 標(biāo)簽選擇器：權(quán)重值為1。標(biāo)簽選擇器通過(guò)HTML標(biāo)簽名進(jìn)行選取，是最常見(jiàn)的選擇器之一。

5. 通用選擇器：權(quán)重值為0。通用選擇器是一個(gè)星號(hào)(*)符號(hào)，能夠匹配任何HTML元素，是權(quán)重最低的選擇器。

當(dāng)多個(gè)選擇器作用于同一個(gè)元素時(shí)，根據(jù)選擇器權(quán)重值的大小來(lái)決定哪個(gè)樣式規(guī)則會(huì)生效。如果存在多個(gè)具有相同權(quán)重值的選擇器，后面出現(xiàn)的選擇器會(huì)覆蓋前面的選擇器。

示例代碼及運(yùn)行結(jié)果

下面是一些示例代碼，以及運(yùn)行結(jié)果來(lái)說(shuō)明選擇器權(quán)重的應(yīng)用：

```html

```

上述代碼中，我們定義了一個(gè)類選擇器 `.container`、一個(gè)ID選擇器 `title` 和一個(gè)標(biāo)簽選擇器 `h2`，并且還使用了一個(gè)組合選擇器 `.container title`。各個(gè)選擇器設(shè)置了不同的顏色樣式。

根據(jù)選擇器權(quán)重的規(guī)則，組合選擇器 `.container title` 的權(quán)重值為110，所以它的樣式優(yōu)先級(jí)最高，文本顯示為黃色。而單獨(dú)的類選擇器 `.container` 和 ID選擇器 `title` 的權(quán)重值分別為10和100，所以它們的樣式優(yōu)先級(jí)較低。標(biāo)簽選擇器 `h2` 的權(quán)重值為1，所以它的樣式優(yōu)先級(jí)最低，被組合選擇器覆蓋，文本沒(méi)有變綠。

通過(guò)這個(gè)例子，我們可以看到選擇器權(quán)重的概念對(duì)于確定樣式優(yōu)先級(jí)是非常重要的。了解選擇器權(quán)重的規(guī)則能夠幫助我們更好地控制和調(diào)整頁(yè)面布局和樣式。