CSS Стили конфликта

Question

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

Как включить эту таблицу стилей, не вызывая конфликта или переопределения на всем сайте?

Answer 1

Если нет лучшего варианта, то дайте tableid или конкретному class. Затем используйте это во всех ваших объявлениях CSS, гарантируя, что стили внутри будут применяться только к вашей новой таблице. This article объясняет идею псевдо-именного пространства, что заслуживает рассмотрения.

Таким образом, вместо:

td { border: 1px solid black; } 

Вы бы, например:

.myClass td { border: 1px solid black; } 

Answer 2

Есть два вида вещей, чтобы заботиться о: 1) предотвращении вашей таблицы стилей от воздействия таблицы, используемой для форматирования всей таблицы и 2) предотвращения форматирования этой таблицы от влияния на вашу таблицу. Ваша таблица стилей должна быть изменена для этого.

Начните с присвоения уникального id вашей таблице, а затем используя соответствующий селектор во всех правилах вашей таблицы стилей (см. Ответ Роба). Этого достаточно для 1). Этого в основном хватает и на 2), но не всегда. Вы должны проверить его и посмотреть общую таблицу стилей. Здесь нет быстрого пути.

Чтобы проиллюстрировать проблему, предположим, что вы хотите, чтобы ваша таблица имела границы вокруг ячеек. Для этого у вас может быть table#foo td { border: solid; }. Но если общая таблица стилей имеет td { border: none !important; }. Это не хорошая практика, но такие вещи используются; авторы часто используют !important без уважительной причины. В этом случае, если общая таблица стилей не может быть изменена, вам также нужно будет использовать !important в вашей таблице стилей. В крайних случаях вам может понадобиться использовать только !importantи записи, чтобы они были более конкретными.