Как применить css к содержимому iframe?

Я не могу заставить CSS-сгенерированный контент работать для элементов iframe:

iframe::after {content: 'example';}
iframe::before {content: 'example';}

Есть ли у кого-нибудь решение, которое действительно работает? Спасибо заранее.

Ответ 1

Вы можете использовать функцию jQuery .content() для доступа к ней.

$('yourIframe').contents().find('#yourItemYouWantToChange').css({
    opacity: 0,
    color: 'purple'
});

Пример

Вот пример, показывающий, как я применяю css к логотипу jQuery, обычно находящемуся в верхнем левом углу экрана. Имейте в виду, что это должен быть тот же домен/порты и т.д., Поэтому, почему мой пример показывает jsfiddle в iframe.
http://jsfiddle.net/pPqGe/

Ответ 2

Является ли iframe динамически созданным или это то, что в основном статично (светлый iframe используется для эффекта лайтбокса).

Если он статичен, вы можете просто использовать теги стиля внутри разметки iframe или, еще лучше, включить внешнюю таблицу стилей, связав ее с разметкой iframe.

Если он динамический, вам лучше использовать библиотеку jQuery JavaScript, поскольку он исключительно хорош для обработки CSS.