有没有办法只在css之后在li之后显示div？

Question

I have the following tabs structure:

<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>

On web view it displays correctly (with some simple script: displaying a div depending on selected li).

But on the print view this should be displayed in the following structure:

First header
First content

Second header
Second content

If I add display: block on the whole structure it apparently firstly displays li s, then div s.

Is there a way to form required view only with css?

Answer 1

No, without duplicating content its not possible. However you can achieve this as follows:

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;
    }
}

Answer 2

You can use data-attributes if it is just about to show a title .

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>