Gibt es eine Möglichkeit, div nach li nur mit CSS anzuzeigen?

Question

Ich habe folgende Registerkarten Struktur:

<ul> 
    <li id="first">First header</li> 
    <li id="second">Second header</li> 
    <li id="third">Third header</li> 
    <li id="fourth">Fourth header</li> 
</ul> 
<div id="first_div">First content (related to first li)</div> 
<div id="second_div">Second content (related to second li)</div> 
<div id="third_div">Third content (related to third li)</div> 
<div id="fourth_div">Fourth content (related to fourth li)</div> 

Auf Webansicht es richtig angezeigt wird (mit einigen einfachen Skript: ein div Anzeigen auf ausgewählt li abhängig).

Aber auf der Druckansicht soll dies in der folgenden Struktur angezeigt:

First header 
First content 

Second header 
Second content 

Wenn ich display: block auf der gesamten Struktur hinzufügen offenbar zeigt es zunächst li s, dann div s.

Gibt es eine Möglichkeit, die erforderliche Ansicht nur mit CSS zu erstellen?

Answer 1

Sie können data-attributes verwenden, wenn es gerade im Begriff ist, einen Titel zu zeigen.

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes

/* @media print { */ 
 

 
ul { 
 
    display:none; 
 
    } 
 

 
div:before { 
 
    content:attr(data-title); 
 
    display:block; 
 
    font-size:1.4em; 
 
    margin:1em 0 0.25em; 
 
    background:gray; 
 
    } 
 

 
/*}*/ 
 
div { 
 
    background:lightgray; 
 
    }

<ul> 
 
    <li id="first">First header</li> 
 
    <li id="second">Second header</li> 
 
    <li id="third">Third header</li> 
 
    <li id="fourth">Fourth header</li> 
 
</ul> 
 
<div id="first_div" data-title="My First Header title">First content <br/>(related to first li)</div> 
 
<div id="second_div" data-title="My Second Header title">Second content <br/>(related to second li)</div> 
 
<div id="third_div" data-title="My Third Header title">Third content <br/>(related to third li)</div> 
 
<div id="fourth_div" data-title="My Fourth Header title">Fourth content <br/>(related to fourth li)</div>

Answer 2

Nein, ohne Inhalt zu duplizieren ist nicht möglich. Allerdings können Sie dies wie folgt erreichen:

HTML:

<ul class="headers-list"> 
    <li class="first">First header</li> 
    <li class="second">Second header</li> 
    <li class="third">Third header</li> 
    <li class="fourth">Fourth header</li> 
</ul> 

<div class="first print-header">First header</div> 
<div id="first_div">First content (related to first li)</div> 

<div class="second print-header">Second header</div> 
<div id="second_div">Second content (related to second li)</div> 

<div class="third print-header">Third header</div> 
<div id="third_div">Third content (related to third li)</div> 

<div class="fourth print-header">Fourth header</div> 
<div id="fourth_div">Fourth content (related to fourth li)</div> 

CSS:

.print-header { 
    display: none; 
} 

@media print { 
    .headers-list { 
     display: none; 
    } 
    .print-header { 
     display: block; 
    } 
}