我具有以下标签结构:

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

10-05 21:03
查看更多