當您有兩個CSS文件時，我該如何覆蓋某些條件？

我有一個名爲index.html和about.html的頁面。我有一個名爲main.css的css文件（它在每個頁面上都使用，因爲常見的css樣式），另一個名爲about.css（它包含about.html特有的樣式）。當您有兩個CSS文件時，我該如何覆蓋某些條件？

在main.css的我有這樣的CSS塊：

html, body, form { 
    margin: 0px; 
    padding: 0px; 
    height: 100%; 
}

這是建立在about.html問題。在about.css中，我該怎麼做才能讓頁面上的html，body，form不使用margin：0px; padding：0px ;, height：100％？

問：

從本質上講，我應該如何防止HTML，身體形式{ 保證金：0像素; padding：0px; 身高：100％; } 顯示在about.html？我可以使用哪些值，以便保證金，填充和高度基本上不存在about.html

來源

2013-08-19 starbucks

你可以給你的身體添加一個'id' – Prisoner

使用特定的css類到新頁面的新元素 – Krishna

@krishna我知道這一點。我只是問如何擺脫那些重要的屬性。 – starbucks

有在玩兩樣東西在這裏。其一，CSS是級聯的 - 意味着如果一種風格存在於具有相同選擇器的另一種風格之後，則後者將優先。如果您在DOM您的main.css後裝入樣式表，用相同的選擇（正是因爲他們在main.css的）任何樣式將覆蓋對方：

<link href="blah/main.css" ... /> 
<link href="blah/overwrite.css" ... />

二是有問題特異性。假設你有針對性的，像這樣同一個元素：

.main .last .element { //css } 
.main .element { //css }

即使第二組樣式是第一後，首先會，因爲它更專門針對該元素優先。

!important修飾符實際上僅用於全局更改，這就是爲什麼人們告訴您要謹慎使用它 - 因爲如果一切都是!important，則什麼也不是。

在您的具體情況：

嘗試關於我們網頁HTML元素添加類，像這樣：

<html class="about-us">

然後瞄準關於我們頁面在主。像這樣的css文件：

html.about-us, 
body.about-us, 
form.about-us { margin: auto; padding: auto; height: auto; }

這利用了選擇器的特殊性並覆蓋樣式。

來源

2013-08-19 19:51:50

謝謝，但我的問題是什麼值使用，以防止他們影響about.html？那麼我可以在margin，height，padding中使用什麼值，以便它在about.css中設置爲none？ – starbucks

更新了我的答案。 –

賓果！謝謝哥們！ – starbucks

如果您在加載公共CSS樣式表之後編寫任何規則，它將覆蓋常用樣式。

例如

<link rel="stylesheet" href="common.css"/> 
<link rel="stylesheet" href="about.css"/><!-- these "override" the ones in common --> 
<style> 
    html, body, form { 
     padding:12px; 
     background:blue; 
     border:3px; 
     /*Set whatever properties you want*/ 
    } 
</style>

注意到我直接顯示出來的屬性和鏈接......

注2：僅僅因爲你可以做到這一點，是厭倦了不斷的重置屬性...你想盡可能多的減少這種儘可能。

來源

2013-08-19 19:43:01 scunliffe

對不起，我應該提到，我不能使用內聯的CSS。 – starbucks

添加的HTML標記的類，試試這個CSS：

html.class,html.class body,html.class form { 
    /*Set whatever properties you want*/ 
}

來源

2013-08-19 19:50:32 Hushme

你不能擺脫樣式，但只要你的「about.css」樣式表在主樣式表之後加載，你就可以覆蓋樣式。

儘管您無法擺脫一次定義的樣式，但您有時可以將值重置爲其默認值。例如，「margin：auto;」將導致保證金恢復爲通常對於html，body和form所做的任何修改。

來源

2013-08-19 19:52:05

當您有兩個CSS文件時，我該如何覆蓋某些條件？

回答

相關問題