属性选择器规则失效：如何仅在指定页面使导航项加粗？

首先得说清楚：纯CSS本身没有直接根据当前页面URL来选中元素的能力——CSS是基于DOM结构工作的，没法直接读取浏览器地址栏的URL信息。你之前尝试的相邻兄弟选择器无效，是因为html link[href="http://www.stuff.com/tagged/patterns"]这个选择器是在找页面里的<link>标签（比如样式表链接），而你的导航<a>标签根本不是它的相邻兄弟，自然匹配不到任何内容。

不过有两种可行的方法能实现你的需求：

方法1：利用页面唯一标识元素 + CSS :has() 选择器 #

如果目标页面（http://www.stuff.com/tagged/patterns）里存在一个只有该页面才有的元素（比如某个特定ID、class的容器，或者唯一的图片alt文本），你可以结合CSS的:has()选择器来定位导航项。

举个例子，假设目标页面里有个唯一的内容容器：<div id="patterns-page-content">，那你可以写这样的CSS：

body:has(#patterns-page-content) a[href="/patterns"] {
  font-weight: bold;
}

:has()选择器的作用是“选中包含指定元素的父元素”，这里就是当body里存在#patterns-page-content时，才把对应的导航项加粗。目前现代浏览器（Chrome、Firefox、Safari 15.4+）都支持这个选择器，旧浏览器可能需要降级方案。

方法2：用JavaScript检测URL并设置样式 #

如果页面里找不到唯一标识元素，那JavaScript是更稳妥的方案——它可以直接读取当前页面的URL，然后给对应的导航项设置样式，完全不需要修改HTML：

// 检测当前URL是否包含目标路径
if (window.location.href.includes('tagged/patterns')) {
  // 找到对应的导航链接
  const targetNavLink = document.querySelector('a[href="/patterns"]');
  // 如果找到就设置粗体
  if (targetNavLink) {
    targetNavLink.style.fontWeight = 'bold';
  }
}

这个方法兼容性拉满，所有现代浏览器都支持，而且逻辑简单直接，完全符合你“仅通过目标页面URL实现”的需求。

内容的提问来源于stack exchange，提问作者Chris