Html 有没有一种方法只使用css在li之后显示div？

我有以下选项卡结构：

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

First header
First content

Second header
Second content

如果我在整个结构上添加

display:block

，它显然首先显示

li

s，然后显示

div

s

---

是否有一种只使用css形成所需视图的方法？

否，不复制内容是不可能的。但是，您可以通过以下方式实现这一点：

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>

.print-header {
    display: none;
}

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

---

不，不复制内容是不可能的。但是，您可以通过以下方式实现这一点：

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>

.print-header {
    display: none;
}

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

---

如果要显示标题，可以使用数据属性

/*@media print{*/
保险商实验室{
显示：无；
}
部门：以前{
内容：attr（数据标题）；
显示：块；
字号：1.4em；
边缘：1米0.25米；
背景：灰色；
}
/*}*/
div{
背景：浅灰色；
}

第一个标题
第二个标题
第三个页眉
第四个标题

第一个内容
（与第一个li相关）
第二个内容
（与第二个li相关）
第三内容
（与第三里有关）
第四个内容
（与第四个li相关）

如果要显示标题，可以使用

数据属性



/*@media print{*/
保险商实验室{
显示：无；
}
部门：以前{
内容：attr（数据标题）；
显示：块；
字号：1.4em；
边缘：1米0.25米；
背景：灰色；
}
/*}*/
div{
背景：浅灰色；
}

第一个标题
第二个标题
第三个页眉
第四个标题

第一个内容
（与第一个li相关）
第二个内容
（与第二个li相关）
第三内容
（与第三里有关）
第四个内容
（与第四个li相关）
可以选择它作为解决方案，但在我的项目中，我至少有三个选项卡实现，我希望以最少的html修改实现所需的目标。可以选择它作为解决方案，但在我的项目中，我至少有三个选项卡实现，我希望用最少的html修改来实现所需的目标