WordPress站点锚点链接触发CSS:active异常及.htaccess配置问题

问题背景 #

• 搭建的WordPress站点中设置了两列可展开内容，需求是点击锚点链接时对应列展开，且同一时间仅一列处于展开状态
• 内容的展开/收起通过CSS的:active伪类实现，但只有当锚点链接被添加到URL中时，该效果才会触发
• 已排除JS文件干扰，问题锁定在.htaccess配置上
• 目前添加的规则如下，但未达到预期效果：

RewriteCond %{REQUEST_URI}  !referenzen\.php      [NC]
RewriteCond %{REQUEST_URI}  ^/referenzen/([^/]+)/? [NC]
RewriteRule .*       /referenzen.php#%1           [R,NE,L]

解决方案 #

1. 修正.htaccess跳转规则 #

当前规则的[R]默认是302临时跳转，浏览器处理时可能丢失锚点的触发状态，改为永久跳转（301）并优化匹配逻辑：

RewriteCond %{REQUEST_URI} !^/referenzen\.php$ [NC]
RewriteCond %{REQUEST_URI} ^/referenzen/([^/]+)/?$ [NC]
RewriteRule ^ /referenzen.php#%1 [R=301,NE,L]

• R=301：明确永久跳转，避免浏览器缓存旧的跳转逻辑
• NE：确保锚点#不会被URL编码，保证锚点能正确识别
• 调整第一个条件为!^/referenzen\.php$，精准排除目标页面本身，避免循环跳转

2. 优化CSS触发逻辑 #

:active伪类主要针对元素被点击激活的状态，并不适配锚点URL的持久触发场景，建议替换为:target伪类，专门匹配URL锚点对应的元素：

/* 默认隐藏内容列 */
.column-content {
  display: none;
}
/* 当锚点匹配时展开对应列 */
.column-content:target {
  display: block;
}

同时确保锚点链接的href值与对应内容列的id完全一致（大小写敏感）。

3. 测试前清除缓存 #

修改.htaccess后，务必清除浏览器缓存再测试，避免旧的跳转规则影响结果。

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