我具有以下标签结构:
<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>
在Web视图上,它可以正确显示(使用一些简单的脚本:根据选定的li显示div)。
但是,在打印视图中,它应该以以下结构显示:
First header
First content
Second header
Second content
如果在整个结构上添加
display: block
,则显然首先显示li
,然后显示div
。有没有一种方法只能使用CSS形成所需的视图?
最佳答案
如果data-attributes
即将显示标题,则可以使用。
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>