CSS動(dòng)態(tài)路徑

CSS的動(dòng)態(tài)路徑指的是根據(jù)不同的頁面路徑來引用不同的樣式文件。這對(duì)于開發(fā)多個(gè)頁面的網(wǎng)站非常有用，可以提高代碼的重用性和維護(hù)性。

假設(shè)我們的網(wǎng)站有以下兩個(gè)頁面：

├── index.html
└── about.html

我們可以為每個(gè)頁面單獨(dú)創(chuàng)建一個(gè)樣式文件：

├── index.html
├── css
│   ├── index.css
│   └── about.css
└── about.html
├── css
│   ├── index.css
│   └── about.css

然后，我們要根據(jù)當(dāng)前頁面的路徑引用正確的樣式文件。在HTML中，我們可以使用以下代碼來引入樣式：

<link rel="stylesheet" href="css/index.css">

但是，這種寫法是固定的，無法根據(jù)不同的頁面路徑加載不同的樣式。幸運(yùn)的是，CSS提供了一個(gè)特殊的選擇器：`<link rel="stylesheet" href="path/to/file.css">])。`href屬性支持相對(duì)路徑、絕對(duì)路徑，還支持相對(duì)根目錄的路徑，如：href="/css/index.css"。這樣，就可以在不同的頁面中使用相同的CSS文件了：

├── index.html
├── about.html
└── css
└── common.css

在common.css文件中，我們可以針對(duì)不同的頁面設(shè)置不同的樣式：

/* 僅在 index.html 中生效的樣式 */
body {
	background-color: #f5f5f5;
}
/* 僅在 about.html 中生效的樣式 */
h1 {
	color: blue;
}

這樣，我們就可以使用同一個(gè)樣式文件，但在不同頁面中生效不同的樣式。