覆蓋不同頁面的CSS值

我有以下CSS用於在div中並排放置圖像的水平滾動。誠如通過@Moob我使用覆蓋不同頁面的CSS值

#scroll li:first-child { 
padding-left:30px; 
} 
#scroll li:last-child { 
padding-right:50px; 
}

從下面的CSS

#scroll { 
width:665px; 
height:550px; 
margin:0px auto; 
background:#ffffff; 
overflow-y:hidden 

} 
#scroll ul { 
margin:0; 
padding:0; 
display:table; 
list-style:none; 
} 
#scroll li { 
padding:10px 100px; 
text-align:center; 
display:table-cell; 
vertical-align:middle; 
border:1px solid #fff; 
} 

#scroll li:first-child { 
padding-left:30px; 
} 
#scroll li:last-child { 
padding-right:50px; 
} 

#scroll img { 
border:0; 
display:block; 
margin:0px auto; 
} 

#scroll span { 
padding:10px 0 0; 
display:block; 

}

爲了控制第一圖像的左填充和最後一個圖像的右填充，因爲圖像是不同的長度/高度不超過665×550像素。我在水平滾動啓用的框架類型框中顯示圖像。我的問題是，如果我想使用5個不同的頁面相同的CSS來顯示不同類型的圖像，我怎麼能單獨設置

#scroll li:first-child { 
padding-left:30px; 
} 
#scroll li:last-child { 
padding-right:50px; 
}

的每一頁，因爲填充將針對不同的頁面不同第一和最後的圖像？我只是將它添加到我的css文件鏈接下的該頁面的頭部樣式中？它會覆蓋文件的值嗎？

感謝，瑞安

來源

2013-12-18 Ryan

是的。只要特定於頁面的css比通用站點範圍的css晚。 – Abhitalks

頁特定CSS不添加到您的網頁標題，它是維持一個噩夢。

產品添加了獨特id在每一頁上您body標籤：

<body id="page1">

然後使用id作爲一個選擇你的CSS來此改變原始設置：

#page1 #scroll li:first-child { 
    padding-left:30px; 
} 
#page1 #scroll li:last-child { 
    padding-right:50px; 
} 

#page2 #scroll li:first-child { 
    padding-left:40px; 
} 
#page2 #scroll li:last-child { 
    padding-right:60px; 
} 

... 

#page9 #scroll li:first-child { 
    padding-left:50px; 
} 
#page9 #scroll li:last-child { 
    padding-right:70px; 
}

這使得你可以所有的CSS在一個文件中。

來源

2013-12-18 13:23:17 Turnip

實際上（在這種情況下）它不會因爲你有一個額外的＃選擇器使頁面覆蓋比原來更具體。但是你提出了一個有效的觀點。 – Turnip

謝謝！這工作像一個魅力。並在此過程中學到了新的東西:) – Ryan

這是關於SO的最好的事情。你每天學習新的東西：） – Turnip

只要您的頁面樣式代碼在包含您的css文件之後出現，它將優先考慮。只需導入您的css文件，然後在其中包括標記中的調整，就像在提到的最後一個規則上優先處理CSS一樣。

來源

2013-12-18 13:24:30 JaanRaadik

覆蓋不同頁面的CSS值

回答

相關問題