Ocultar todos los elementos de la página web, excepto div único nested

Supongamos que mi página web tiene una estructura como esta:

 

Content

Blah

More content

Meh ...
...
...
...
...
...
...

Quiero crear un estilo de impresión CSS que lo oculte todo, excepto el contenido de actual_content .

Mi primer bash fue así:

 body * { display: none; /* Hide everything first */ } /* Show content div and all of its ancestors */ body > #fee { display: block; } body > #fee > #fi { display: block; } body > #fee > #fi > #actual_content { display: block; } /* Unhide contents of #actual_content */ #actual_content * { display: block; /* Not ideal */ } 

Sin embargo, como no hay “display: auto” o “display: default”, estropeo los estilos de los elementos de real_content cuando trato de mostrarlos. Tampoco me gusta progtwigr con dificultad el camino a actual_content, ya que podría cambiar.

Probablemente quiera usar la propiedad de visibilidad . W3Schools describe la diferencia entre las propiedades de visualización y visibilidad: la propiedad de visibilidad afecta la visibilidad de un elemento sin afectar su estructura, es decir, el espacio que normalmente ocuparía en la página.

en el nivel superior de div visibility:hidden conjunto visibility:hidden , luego en el div quieres establecer la visibility:visible

Deberá ingresar y seleccionar como objective todo lo que no desea mostrar individualmente configurando display:none . Si puede cambiar los nombres de las clases, etc., debe actual_content

la actual_content

del actual_content

, luego agregar clases como hide_div a las otras

s para que sean fáciles de desactivar.

Sé que sus tags muestran que desea una solución CSS, pero el plugin jQuery de PrintArea es perfecto para sus necesidades:

PrintArea envía un elemento dom específico a la impresora, manteniendo los estilos CSS originales aplicados al elemento que se está imprimiendo.

http://plugins.jquery.com/project/PrintArea