Независимый CSS для Fancybox - PullRequest
2 голосов
/ 26 октября 2011

У меня есть страница, с которой я называю fancybox, которая содержит некоторый HTML-шаблон (что-то вроде шаблона электронной почты). Проблема в том, что весь CSS с главной страницы влияет на содержимое в fancybox и наоборот. Я хотел бы как-то изолировать их, чтобы их CSS не влияли друг на друга.

Пример: у меня установлено фоновое изображение для h3 для главной страницы. Кроме того, в fancybox у меня есть элемент h3, которому не присвоен CSS, но он вытягивает стиль с главной страницы и получает такое же фоновое изображение (чего не должно быть).

Возможно ли это как-нибудь?

Ответы [ 3 ]

3 голосов
/ 26 октября 2011

Вы можете разбить свой CSS на несколько файлов, используя только то, что вам нужно для каждого html.Если вы не можете этого сделать, вы можете указать тело #id для вашего шаблона, загружаемого в fancybox.

<body id="fancy_content">

, а затем адаптировать ваши стили для этого шаблона

body#fancy_content h3 {
  color: green;
}

Вы все равно можете столкнуться с небольшим стилевым конфликтом, если оставить его в одном файле, но это даст вам способ продолжить работу.

1 голос
/ 26 октября 2011

На самом деле у вас есть 3 варианта.

  1. Запустите содержимое fancybox в режиме iframe, что означает, что содержимое должно быть на его собственной странице без главной таблицы стилей.Вы можете использовать любой стиль, который вам нравится, или его совсем нет.
  2. Сбросить стили в контенте fancybox, хотя это может быть довольно утомительно в зависимости от количества затронутых элементов.за пределами основного #wrapper div вашей страницы, и заставьте все стили страницы наследовать от #wrapper.т.е. вместо h3 {...} используйте #wrapper h3 {...}
0 голосов
/ 26 октября 2011

попробуйте добавить идентификаторы к вашим HTML-элементам, затем используйте CSS-идентификаторы

 h3#idname { color: #FF0000; } 
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...