要实现文章目录效果，可以使用CSS的伪类选择器和锚点链接。
首先，在HTML中为每个标题（如h1、h2、h3等）添加一个唯一的ID，例如：
<h2 id="section-1">第一节</h2>
<p>这是第一节的内容</p>
<h2 id="section-2">第二节</h2>
<p>这是第二节的内容</p>
<h3 id="sub-section-1">第二节的子节</h3>
<p>这是第二节的子节的内容</p>接下来，在文章的开始处添加一个目录，使用锚点链接连接到每个标题的ID：
<nav>
<ul>
<li><a href="#section-1">第一节</a></li>
<li><a href="#section-2">第二节</a>
<ul>
<li><a href="#sub-section-1">第二节的子节</a></li>
</ul>
</li>
</ul>
</nav>这样，用户就可以通过点击目录中的链接跳转到对应的标题处。
接下来，使用CSS为目录添加样式。可以使用伪类选择器:target，它可以选择被锚点链接指向的元素。例如，为被选中的目录项添加背景颜色：
nav ul li:target {
background-color: #ffcc00;
}此外，还可以使用CSS的::before伪元素为目录项添加编号。例如，为一级目录项添加大写字母编号，为二级目录项添加小写字母编号：
nav ul li::before {
content: counter(item) ". ";
counter-increment: item;
font-weight: bold;
margin-right: 0.5em;
}
nav ul ul li::before {
content: counter(item, lower-alpha) ") ";
counter-increment: item;
font-weight: normal;
margin-right: 0.5em;
}这样，目录就可以显示为带编号的列表，用户可以更方便地浏览文章内容。