CSS包含問題

Question

我有一個包含幾個CSS文件的jsp頁面。

在此，每個CSS都有單獨定義的表格樣式。

問題是我需要這些不同的表格樣式，我無法區分它們，菜單的CSS樣式與新的CSS樣式重疊。

我該如何避免這個問題; menu.jsp已被包含到另一個頁面中。有沒有辦法避免重寫樣式？

Answer 1

給您的CSS結構更好的heirachy。

#container #sectionid .class{} 

，而不是

.class{} 

一個例子是這樣的：

<h2>Page Title</h2> 
<div id="container"> 
    <div id="news"> 
     <h2>News Section</h2> 
     <div class="month" id="january"> 
     <h2>News Article 1</h2> 
     </div> 
     <div class="month" id="february"> 
     <h2>News Article 2</h2> 
     </div> 
    </div> 
</div> 

h2 {color:red;} < This would set all <h2> tags to be red 
#container h2 {color: red;} < This would set all <h2> tags inside the container div to red 
#container #news h2 {color: red;} < This would set all <h2> tags inside the news div to red 
#container #news .month h2 {color: red;} < This would set all <h2> tags inside month divs to red 
#container #news .month #january h2 {color: red;} < This would only set the <h2> tag inside the january div to red. 

使用這種方法使你的代碼更多的語義，讓您對您的元素更多的控制，而不必使用大量的ID和類。在上面的例子中，你希望所有的H2標籤是大小相同，但在不同顏色的月份，所以你會設置相應的樣式：

h2 {font-size: 2em;} 
#container #news .month #january h2 {color: red;} 
#container #news .month #february h2 {color: blue;} 

Answer 2

要麼只是不包含這些CSS文件，要麼爲表提供唯一的ID或類名，以便您可以在CSS中掛鉤它。

如果要專門處理的唯一表，使用id：

<table id="mySpecialTable"> 
    ... 
</table> 

使用CSS規則對這個ID開始#：

#mySpecialTable { 
    border: 2px solid red; 
} 

或者，如果你想分享多種表格之間的風格，使用class：

<table class="mySpecialTable"> 
    ... 
</table> 

與本類名CSS規則開始.：

.mySpecialTable { 
    border: 2px solid red; 
} 

也參見：

• W3 Schools: CSS tutorial/reference
• W3: CSS selectors
• A CSS tutorial

Answer 3

這是級聯樣式錶行爲的一部分 - 您可以聲明許多規則並按順序應用。

爲了避免這種情況，您需要向菜單表格和該菜單表格的css規則添加一個類。在爲菜單表格編寫的css規則中，您可能需要覆蓋爲css中其他地方的常規「table」元素聲明的任何規則。

Answer 4

的常用方法分離爲不同元素的樣式將它們放入具有某個類的父容器中。

考慮一個HTML的結構是這樣的：

<div class="area1"> 
<table ...... > 
</div> 

<div class="area2"> 
<table ...... > 
</div> 

你的CSS將針對這些領域，像這樣：

.area1 table { ... } /* Definitions for tables in area1 */ 
.area1 table td { ... } 

.area2 table { ... } /* Definitions for tables in area2 */ 
.area2 table td { ... } 

Answer 5

當加載多個CSS，你必須在每個定義的相同的CSS，沒有辦法避免壓倒一切。

您可能想爲每個表定義不同的id/class。

唯一的另一種解決方案是，如果你能以某種方式識別/指定每個jsp只使用一種表格式。那麼你可以使用jsp只加載所需的CSS並忽略其他的（或以不同的順序加載它們）