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

Question

我有以下标签结构:

<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 View 中它正确显示(使用一些简单的脚本:根据所选的 li 显示一个 div)。

但是在打印 View 中，这应该以以下结构显示:

First header
First content

Second header
Second content

如果我在整个结构上添加 display: block，它显然首先显示 li，然后是 div。

有没有办法只用 css 形成所需的 View ？

Answer 1

如果只是要显示标题，可以使用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>