本质上，我在一个大型应用程序中有一个微型站点。我想为页面创建一个具有活动状态的三级导航。它的单个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标签这样做。问题是，是否可以对不同的url执行类似的操作？: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>
不适用于多个页面？这是一个git工作项目
您尝试使用target类的方式是基于上面提供的示例向后的。现在，您要求目标类高亮显示所选链接，但target伪类会根据所选链接高亮显示与其关联的内容部分。如果你在这里查看w3schools网站演示，你可以看到它的实际操作。请注意，单击链接时内容会发生更改，而不是相反。
如果您希望根据所选的导航链接突出显示导航链接，则需要动态添加"活动"类，很可能使用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应用于锚标记，它们需要在URL中以#page1的形式传递ID值。此外，targetCSS是内容部分，而不是导航菜单。按照其他页面的设置，它应该会很好地工作。
参见§6.6.2。目标伪类：目标
一些URI引用资源中的某个位置。这种URI结束带有一个"数字符号"(#)，后跟一个锚点标识符(称为片段标识符)。
具有片段标识符的URI链接到文档，称为目标元素。
目标元素可以由
:target伪类来表示。如果文档的URI没有片段标识符，则文档具有没有目标元素。
因此您可以使用
nav li:target {
background: #ccc
}<nav>
<ul>
<li id="page1"><a href="#page1">Page 1</a></li>
<li id="page2"><a href="#page2">Page 2</a></li>
<li id="page3"><a href="#page3">Page 3</a></li>
</ul>
</nav>