爲同一網頁的不同部分應用不同的CSS樣式表

我有一個網頁，其中有不同的部分，它們需要將不同的CSS樣式表應用到每個部分。我想知道的是如何指定哪些CSS樣式表用於網頁的每個不同部分。如果我將它們全部放在一起，組件將無法正確顯示。爲同一網頁的不同部分應用不同的CSS樣式表

2010-07-21 C..

用戶的意思是，他擁有多個** .css文件被調用到一個網頁中，但由於（明顯的）衝突，該頁面無法正確顯示。我猜css文件有相同的名稱導致衝突的div /節。這就是他要問的問題，Ned下面的答案似乎是一個很好的答案。 – 2014-05-05 11:24:56

這個問題顯而易見，所以我很清楚這是一個「真正的問題」。 – 2015-06-11 16:09:39

這個問題很明確，對我來說很有意義。當主持人關閉這裏的問題時，我鄙視。 – 2015-11-04 03:43:25

不能將不同樣式表應用於頁面的不同部分。您有幾種選擇：

最好是包裹頁面的不同部分中的div類名稱：

<div class='part1'> 
    .... 
</div> 

<div class='part2'> 
    .... 
</div>

然後在你的第一部分CSS，前綴「.part1」每一個CSS規則，在你的part2 CSS中，以「.part2」爲每個CSS規則加上前綴。請注意，通過使用類，您可以使用多個不同的「part1」或「part2」div來靈活劃分頁面的哪些部分受哪些CSS規則的影響。

2010-07-21 11:39:34

6年後... :(仍然沒有範圍的CSS 爲什麼瀏覽器仍然不支持此功能？ – Spirit 2016-02-01 22:10:36

爲您的網頁中的每個部分使用不同的類併爲每個類自定義CSS代碼。

2010-07-21 11:36:53 dejavu

它被稱爲是有原因的層疊樣式表（CSS）..

使用CSS的specificity規則來指定每個部分..

即..

#section1 a{color:red} 
#section2 a{color:blue}

這將使ID爲section1的元素內的所有鏈接都變爲紅色，並且ID爲section2的元素內的所有鏈接都變成藍色。

<div id="section1"> 
<a href="#">i will be red</a> 
</div> 
<div id="section2"> 
<a href="#">i will be blue</a> 
</div>

2010-07-21 11:39:13

在加載bootstrap.css或任何其他外部css時不起作用 – oriadam 2016-11-21 17:42:22

由於問題已關閉，因此我也覺得這是錯誤的。在我的情況下，我在頁面不同部分的CSS庫之間存在衝突（在django的基於bootstrap的管理用戶界面中嵌入了角度ui）。我即將嘗試的方法是將一個嵌入到iframe中。 – Chris 2017-01-06 07:46:09

較新版本的bootstrap提供.less或。scss格式，可以通過自定義包裝輕鬆包裝以實現範圍界定。如：＃section1 { } – Shawn 2017-02-24 16:17:58

外部樣式表應用於整個html頁面。爲了不同的樣式表應用到不同的部分， 首先，的HTML頁面已被劃分成使用HTML標籤（與每個HTML DIV被分配一個唯一的id或類） 其次，不同段外部樣式表要被施加到每個div有根據分配給它

實施例如上述由加比又名G. Petrioli解釋的ID /類被設計...

2012-10-30 18:04:05 kapil

回答