Скрыть контейнер, но показать содержимое

Question

Я пытаюсь быстро создать таблицу стилей печати, где я хотел бы удалить элемент из печати, но все равно вынудить дочерний элемент.

<div class="container print-hide"> 
    <p class="content print-show"> 
     Some content 
    </p> 
</div> 

Я надеялся, что гуру CSS там будет лучше, чем я. В этом случае я хочу удалить весь стиль элемента (в этом случае контейнер), но все равно покажет вложенный элемент (содержимое).

@media print { 
    .print-hide { display:none; } 
    .print-show { /* magic */ } 
} 
@media screen { 
} 

---

Я могу только быстро думать о 3-х подходов, каждый из которых не желательны:

1. Вставить двойное содержание в HTML. С вложенными элементами, которые имеют класс print-show, отображаются там, где они будут отображаться, и спрятать их на экране.

2. Использование JS и открыть содержимое в новом окне/IFRAME, зачистки из элементов, которые мы хотим напечатать

3. Не используйте классы и зачистите части мне не нравится в CSS:

   @media print{ 
       .container { /* remove unwanted styling */ } 
   } 
   

Answer 1

Это не будет работать. Однако вы можете делать определенные трюки.

Если container имеет фон, вы можете сделать фон прозрачным. Вы можете «отменить» другой стиль таким же образом.

Если у container есть и другой контент, вы можете обернуть это содержимое в промежутки или div и скрыть их. Если он содержит только текст, вы можете сделать font-size: 0 и установить font-sizecontent по определенному размеру (или 1rem по умолчанию).

Но все эти возможности - это просто обходные обстоятельства для того, что вы не можете скрыть родителя, сохраняя при этом ребенка видимым, поэтому в основном я думаю, что option 3 - лучший вариант, который у вас есть.