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规则中添加一个类。在为菜单表编写的css规则中，您可能需要覆盖为css中其他位置的常规“table”元素声明的任何规则。

Answer 3

为不同元素分隔样式的常用方法是将它们放入具有特定类的父容器中。

考虑这样的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 4

当您加载多个css，并且每个css中都定义了相同的css时，无法避免覆盖。

您可能希望为每个表定义不同的ID /类。

唯一的另一个解决方案是，如果你能以某种方式识别/指定每个jsp只使用一个表样式。然后你可以使用jsp只加载所需的css而忽略其他的css（或以不同的顺序加载它们）

Answer 5

要么只是不包含那些CSS文件，要么为表提供唯一的ID或类名，以便您可以在CSS中挂钩。

如果您想专门处理一个唯一的表格，请使用id：

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

对此ID的CSS规则以#开头：

#mySpecialTable {
    border: 2px solid red;
}

或者如果您想在多个表之间共享样式，请使用class：

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

对此类名称的CSS规则以.开头：

.mySpecialTable {
    border: 2px solid red;
}

另见：

CSS包含问题

5 个答案: