使用CSS :target伪类时如何控制其他div元素的显示隐藏

CSS中的后续兄弟选择器~仅能匹配当前元素之后出现的同层级兄弟节点。你编写的规则#gallery:target ~ #home需要#home节点在HTML结构中位于#gallery之后才能命中，而你当前的页面结构大概率是#home写在#gallery之前，因此选择器匹配不到元素，规则无法生效。

方案1：调整DOM顺序（兼容性最佳） #

不需要改动现有CSS逻辑，仅调整两个div的先后顺序即可，所有浏览器都兼容：

1. HTML结构调整为#gallery在前，#home在后：

<div id="gallery">画廊区域内容</div>
<div id="home">首页区域内容</div>

2. 保留你现有的CSS规则即可：

#gallery {
  display: none;
}
#gallery:target {
  display: block !important;
}
#gallery:target ~ #home {
  display: none !important;
}

由于#gallery默认是隐藏状态，调整DOM顺序不会影响页面初始渲染效果，打开页面时只会显示#home内容。

方案2：使用:has()伪类（无需改DOM结构） #

如果不想调整原有HTML顺序，可以用CSS :has()伪类实现，不需要修改DOM：

/* 父级可替换为两个div的实际共同父元素 */
body:has(#gallery:target) #home {
  display: none !important;
}

该方案兼容Chrome 105+、Firefox 121+、Safari 15.4+版本的浏览器。

方案3：JS实现（全场景兜底） #

如果需要兼容极低版本浏览器，可通过JS监听锚点变化实现效果：

function toggleSection() {
  const isGalleryTarget = window.location.hash === '#gallery';
  document.getElementById('home').style.display = isGalleryTarget ? 'none' : 'block';
  document.getElementById('gallery').style.display = isGalleryTarget ? 'block' : 'none';
}
window.addEventListener('hashchange', toggleSection);
window.addEventListener('load', toggleSection);

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