Можно ли стилизовать div (и его дочерние элементы) с помощью другой таблицы стилей? - PullRequest
Новая
       7

Можно ли стилизовать div (и его дочерние элементы) с помощью другой таблицы стилей?

1 голос
/ 10 марта 2009

Я пытаюсь показать предварительный просмотр печати (#preview в примерах). Есть ли способ использовать print.css только для определенного div и его дочерних элементов, переопределяющих все локальные определения?

По сути, я хотел бы иметь возможность сделать что-то похожее на: 

#preview element {
    definition equal to definition of an element in print.css
}

в main.css, но для длинного списка определений. Это не слишком СУХО, и следующий вариант более последовательный.

Второй подход заключается в том, чтобы включить print.css в основной документ и изменить каждое определение с 

element {
    definition
}

до: 

element, #preview element {
     definition
}

Но это кажется мне немного громоздким.
Как лучше всего решить эту проблему?

Обновление просто для примера:
в основном документе у меня есть подчеркнутые ссылки красного цвета, они должны быть синего цвета в версии для печати. Поэтому, когда содержимое предварительного просмотра формируется динамически, я выскакиваю div, где все ссылки должны быть синего цвета. Но только в этом конкретном div (#preview), в остальной части документа они все еще будут красными и подчеркнутыми.

Ответы [ 5 ]

1 голос
/ 10 марта 2009

Может быть, я до сих пор не понял ваш вопрос, но, похоже, вы сможете это сделать, просто связав таблицу стилей print.css после основной таблицы стилей и добавив префикс всех селекторов в print.css с помощью "#preview" .

В примере со ссылками вам необходимо указать стиль, подобный следующему: 

#preview a, #preview a:link 
{
    text-decoration:none;
    color:blue;
}

Это должно быть довольно просто, если вы динамически не создаете файл print.css.

1 голос
/ 10 марта 2009

Возможно, сделать div iframe, который содержит другую страницу в стиле print.css

В качестве альтернативы вы можете установить для носителя в теге print.css значение «print», но во время предварительного просмотра вы можете использовать сценарий, чтобы изменить носитель на «all».

0 голосов
/ 19 ноября 2009

Добавьте это к вашей таблице стилей: 

@media print {
  #preview a:link {
    color:blue;
  }
}
0 голосов
/ 10 марта 2009

Насколько я помню, более конкретное объявление CSS всегда будет переопределять менее конкретное объявление, если только менее конкретное объявление не помечено как важное.

Итак ... #preview element { } всегда будет переопределять element { }

0 голосов
/ 10 марта 2009 
<link rel="stylesheet" href="/main.css" type="text/css">
<link rel="stylesheet" href="/print.css" type="text/css">
</head>
<body>
<div id="main">
content
</div>

main.css:
selector1 {style}
selector2 {style}
and so on

print.css:
#print selector1 {style}
#print selector2 {style}
and so on

Затем, когда вы создаете предварительный просмотр, просто измените (с помощью JavaScript или чего-либо еще) идентификатор вашей основной оболочки с "main" на "print".

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...