使不同的syle表適用於頁面的不同區域

Question

我有各種css的基本上我想確定哪些樣式表的每個部分的頁面使用，例如我希望我的導航欄使用導航樣式表在其餘的頁面可以使用主樣式表。有任何想法嗎？

Answer 1

你不能這樣做。樣式表適用於整個頁面。您必須簡單地使選擇器具有足夠的特性，以便樣式僅應用於預期的元素。

在您的示例中，您可能會將導航項目放置在<ul id="nav">之下。您的所有導航指定的風格應該與#nav選擇啓動，以確保他們不會意外應用到頁面上的任何其他元素：

#nav li { color:#000; } 
#nav li.active_item { color:#f00; } 
/* etc */ 

Answer 2

或者使用內部框架，或使用CSS類。請記住，CSS類可組合：

<div class="class1 class2 and-so-on">...</div> 

因此，你可以使用一個樣式表只攻擊class1的，一個只針對CLASS3 ......，通常導入所有樣式表。

Answer 3

這是不可能的，因爲CSS適用於整個頁面。爲了實現你想要的，你應該把你的頁面分成不同的部分，例如給每個部分一個唯一的ID。通過這種方式，您可以將不同的樣式應用於單獨的頁面部分。

例如您的導航DIV可能有id="navigation-bar"，然後在CSS，你會寫：

#navigation-bar { 

    /* styles here will apply only to navigation-bar and elements inside it */ 

} 

等等......

Answer 4

如果你的CSS是不是太龐大了，你應該結合起來在一個文件中。這將提高您的下載速度並使用戶更輕鬆。

如果您想保持樣式不同，請在您的CSS中使用註釋，例如

#######NAV STYLES###### 

.nav li {something:something;} 
.nav li a {something:something;} 

######MAIN STYLES###### 

#main #wrapper {something:something;} 

Answer 5

如果你想分開你的CSS，使其更容易管理。你可以將你的css分成獨立的文件，並調用使用@import url();。例如：

core.css將像這樣：然而

//Navigation styles 
@import url("navigation.css"); 

//Banner styles 
@import url("banner.css"); 

//Footer styles 
@import url("footer.css"); 

這將產生一個樣式表，其包括單獨的引用的。