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;}