如何覆蓋css屬性？

讓說，我有一個全球性的css文件，global.css：如何覆蓋css屬性？

.my-class { 
    background-color:red; 
}

我需要一個特定的css文件，specific.css，只是一定html文件。而這html文件也有class名爲my-class。然而，在這個時候，我想讓這個html的背景顏色爲藍色。我怎麼能在specific.css文件中做到這一點？

添加'.my-class background-color：blue！important; }'在你的specific.css文件中 –

有幾種方法可以做到這一點。

選項＃1是爲了確保您的specific.css文件包含在您的全局文件之後。這會導致樣式被覆蓋。

例如：

<link href="global.css" rel="stylesheet" type="text/css" /> 
<link href="specific.css" rel="stylesheet" type="text/css" />

選項＃2是利用CSS的特異性。

選項＃3是要優先考慮你的風格來使用!important。

這並不強烈推薦，但如果上述兩個選項無法滿足您的需求，則可以使用。

2016-08-22 15:11:04

如果那些是bootstraps的組件，那麼它也可以工作嗎？我的意思是，'global.css'爲某個引導組件定義'css'，'specific.css'也定義該組件的css。 – user3595632

是的，無論如何，只需要命名相同（或者更具體（如＃2中提到的那樣）），而不是引導程序並在自舉CSS後加載。 –

如果定義了其他元素的background-color在這是（在你的HTML標記例如負載specific.cssglobal.css後）加載後global.css一個CSS文件。您也可以使用!important標籤來覆蓋所有其他定義的樣式，但通常您不需要這樣。其名爲級聯樣式表的原因。

2016-08-22 15:11:03

回答