Masquage de tous les éléments de la page Web, à l'exception des div uniques imbriqués

Supposons que ma page web a une struture comme ceci:

<body>
    <div id="fee">
        <div id="fi">

            <div id="actual_content">

                <p>Content</p>
                <div id="some_important_stuff">Blah</div>
                <p>More content</p>
                <span class="and_another_thing">Meh</span>

                ...
            </div>

            <div id="fo>
                ...
            </div>

            ...
        </div>

        <div id="fum">
            ...
        </div>

        ...
    </div>

    <div id="fazz">
        ...
    </div>

    ...
</body>

Je veux créer une impression de style CSS qui cache tout, sauf pour le contenu de actual_content.

Ma première tentative était comme ça:

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 */
}

Cependant, puisqu'il n'y a pas "d'affichage: auto" ou "affichage: affichage par défaut", j'en désordre les styles de actual_content's articles quand j'essaie de l'afficher. Je n'aime pas le codage en dur le chemin d'accès à actual_content puisque l'on peut changer.

source d'informationauteur MacDonald

  1. 4

    Vous voudrez probablement utiliser la visibilité de la propriété. W3Schools décrit la différence entre l'écran et les propriétés de visibilité: la visibilité de la propriété affecte la visibilité d'un élément sans modifier sa structure, c'est à dire l'espace qu'occupe habituellement sur la page.

  2. 4

    sur le haut niveau de la div ensemble visibility:hiddenpuis sur la div vous souhaitez définir visibility:visible

  3. 2

    Vous aurez besoin d'aller dans et cible tout ce que vous ne voulez pas de se présenter individuellement par la mise en display:none. Si vous pouvez changer les noms de classe, etc, vous devriez onu-nest la actual_content <div>puis ajouter les classes comme hide_div à l'autre <div>s ils sont donc faciles à désactiver.

  4. 1

    Je sais que vos balises montrer que vous voulez un CSS solution, mais le PrintArea plugin jQuery est parfait pour vos besoins:

    PrintArea envoie un élément dom spécifique à l'imprimante, le maintien de
    l'original de styles css appliqués à l'élément en cours d'impression.

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