Проблема включения CSS

Question

У меня есть страница jsp с несколькими CSS-файлами.

В этом каждый CSS имеет отдельно определенные стили для таблицы.

Проблема в том, что мне нужны эти разные стили для разных таблиц, и я не могу их дифференцировать, а стили CSS в меню перекрываются с новым стилем CSS.

Как мне избежать этой проблемы; menu.jsp был включен в другую страницу. Есть ли способ избежать переопределения стилей?

Answer 1

Улучшите структуру CSS.

#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.

Использование этого метода делает ваш код более семантическим и дает вам гораздо больший контроль над вашими элементами, без необходимости использовать огромное количество идентификаторов и классов. В приведенном выше примере вы хотели бы, чтобы все ваши теги h2 имели одинаковый размер, но месяцы были разных цветов, поэтому вы должны установить соответствующие стили:

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

Answer 2

Когда вы загружаете несколько CSS, и в каждом из них определен один и тот же CSS, избежать переопределения невозможно.

Возможно, вы захотите определить свой идентификатор / класс для каждой таблицы.*

Единственное другое решение, если вы можете каким-то образом определить / указать, что для jsp используется только один стиль таблицы.тогда вы можете использовать jsp для загрузки только необходимых css и игнорировать другие (или загружать их в другом порядке)

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, которые вы пишете для таблицы меню, вам может потребоваться переопределить любые правила, объявленные для общего элемента «table» в другом месте в css.

Answer 5

Либо просто не включайте эти CSS-файлы, либо присвойте таблице уникальный идентификатор или имя класса, чтобы вы могли зацепить их в CSS.

Если вы хотите специально обрабатывать уникальную таблицу, используйте id:

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

с правилом CSS для этого идентификатора, начинающегося с #:

#mySpecialTable {
    border: 2px solid red;
}

Или, если вы хотите разделить стиль между несколькими таблицами, используйте class:

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

с правилом CSS для этого имени класса, начинающегося с .:

.mySpecialTable {
    border: 2px solid red;
}

См. Также :

• W3 Школы: учебное пособие / справочник по CSS
• W3: селекторы CSS
• Учебник CSS