Конфликт стилей CSS

Question

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

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

Answer 1

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

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

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

Answer 2

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

Поэтому вместо:

td { border: 1px solid black; }

Вы быНапример:

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