本质上，我在大型应用程序中有一个微型站点。我想为页面创建一个具有事件状态的三级导航。它的单个 html blob 被插入到多个页面中。
理想情况下，我会使用 active 类来突出显示用户在三级导航中的哪个页面，如下所示
<nav>
<ul>
<li class="active"><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</nav>
但我无法控制后端应用程序，只能完全控制 html、css 并且想避免使用带有 jquery 检测 url 的解决方案。
我的 CSS 应该是
nav li:target {background:#ccc}
代替
nav li.active {background:#ccc}
我已经看到它为 anchor 标签做了类似的事情 like this .
问题是是否可以对不同的网址做类似的事情？ :target 类的正确用法是什么？
下面是我目前根据评论得出的结论
<nav>
<ul>
<li><a id="page1" href="page1.html">Page 1</a></li>
<li><a id="page2" href="page2.html">Page 2</a></li>
<li><a id="page3" href="page3.html">Page 3</a></li>
</ul>
</nav>
不能跨多个页面工作？ here is a git working project
最佳答案
根据您在上面提供的示例，您尝试使用 target 类的方式是倒退的。现在您要求目标类突出显示所选链接，但 target 伪类突出显示内容部分与其相关联的基于所选链接。如果您查看 w3schools site demo here你可以看到它的实际效果。请注意，单击链接时内容会发生变化，反之亦然。
如果您希望根据所选链接突出显示您的导航链接，您将需要动态添加最有可能使用 Jquery 的“事件”类。希望有所帮助。
编辑
根据我们的谈话，我查看了您的代码并能够帮助修复它。
<!DOCTYPE html>
<html>
<style>
.content:target {
background: #ccc;
}
</style>
<body>
<nav>
<ul>
<li><a href="page1.html#page1">Page 1</a></li>
<li><a href="page2.html#page2">Page 2</a></li>
<li><a href="page3.html#page3">Page 3</a></li>
</ul>
</nav>
<h1>This is Page one</h1>
<div class="content" name="page1" id="page1">This is Page ONE paragraph</div>
</body>
</html>
当导航链接不需要 ID 它们需要具有 ID 时，您将 ID 应用于 anchor 标记 值 作为 #page1 在 URL 中传递。此外，您的 target CSS 是内容部分而不是导航菜单。按照此设置其他页面，它应该工作得很好。
关于html - 什么正确使用目标伪类替换多个页面导航上的 'active' 状态？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29973588/