SvelteKit中CSS :target选择器跨页跳转首次样式不生效问题

我有一个基础SvelteKit应用，根目录+layout.svelte中的导航代码如下：

<nav>
  <a href="/">home</a>
  <a href="/target#10">#10</a>
  <a href="/target#20">#20</a>
  <a href="/target#30">#30</a>
</nav>

<div>
  <slot />
</div>

/target路由的+page.svelte中包含一批带id的<p>标签，以及:target样式规则：

<p id="1">
  1. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga dicta
  nostrum harum ad? Cumque recusandae deserunt voluptatum eveniet nostrum quod
  sed. Fugit consequatur laboriosam voluptate quidem, velit commodi voluptatum
  perferendis.
</p>
...
<p id="50">
  50. Dicta harum nulla blanditiis sapiente molestias facere maiores. Quas
  dolore omnis aliquid sapiente vel eius distinctio nulla amet. Ratione velit
  sequi eius eos minima expedita harum consequuntur ab voluptas dolore!
</p>

<style>
  :target {
    background: red;
  }
</style>

现象：从首页点击#20链接，会跳转到/target页面，URL显示正确（/target#20），页面也能滚动到对应位置，但:target样式未生效；第二次点击该链接时样式才会应用。在target页面内切换#10、#30链接一切正常，但返回首页后再次点击带哈希的链接，样式又会失效。

这是SvelteKit客户端导航的特性导致的：

• 从首页通过客户端导航跳转到/target#xxx时，SvelteKit会异步加载并挂载/target的页面组件，同时处理哈希滚动。但浏览器的:target伪类仅在页面初始加载时检测URL哈希，组件挂载完成后，浏览器不会自动重新检测哈希以触发:target样式。
• 第二次点击链接时，页面已挂载完成，哈希变化会直接触发浏览器的:target匹配，样式因此生效；页面内切换哈希时，组件已存在，哈希变化能即时触发样式更新，所以一切正常。

方案一：利用导航钩子触发:target重计算 #

在/target/+page.svelte中通过SvelteKit的导航钩子，强制浏览器重新识别哈希并应用:target样式：

<script>
  import { afterNavigate } from '$app/navigation';
  import { page } from '$app/stores';

  afterNavigate(() => {
    const currentHash = $page.url.hash.slice(1);
    if (currentHash && document.getElementById(currentHash)) {
      // 替换历史状态，触发浏览器重新检测:target
      history.replaceState(null, '', `#${currentHash}`);
    }
  });
</script>

<!-- 原有p标签和样式保持不变 -->

方案二：手动绑定类名替代:target伪类 #

通过监听哈希变化，动态给目标元素添加类名，避免依赖浏览器的:target触发机制：

<script>
  import { page } from '$app/stores';
  let activeHash = '';

  // 监听哈希变化，更新激活状态
  $: activeHash = $page.url.hash.slice(1);
</script>

<!-- 给每个p标签绑定active类 -->
<p id="1" class:active={activeHash === '1'}>...</p>
<p id="2" class:active={activeHash === '2'}>...</p>
<!-- 以此类推到id="50"的p标签 -->

<style>
  .active {
    background: red;
  }
</style>

这种方式更可控，完全不受浏览器:target触发时机的限制。

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