在CSS中使用"target“时显示所有内部块

在CSS中，:target伪类用于选中URL中的片段标识符（即hash值）与文档中id匹配的元素。当用户点击一个链接，其href属性指向页面内某个元素的id时，浏览器会将URL的hash值更新为目标元素的id，此时:target伪类就可以用来选中这个元素。

基础概念

:target伪类的基本语法如下：

element:target {
  /* 样式规则 */
}

这里的element是你想要应用样式的元素选择器。

类型与应用场景

:target伪类通常用于以下场景：

创建简单的单页应用导航。
实现页面内的锚点跳转效果。
展示或隐藏页面内的特定部分。

示例代码

假设我们有一个页面，其中包含几个可以通过锚点链接访问的部分。我们可以使用:target伪类来改变被选中部分的样式。

HTML:

<nav>
  <a href="#section1">Section 1</a>
  <a href="#section2">Section 2</a>
  <a href="#section3">Section 3</a>
</nav>

<section id="section1">
  <h2>Section 1</h2>
  <p>This is section 1 content.</p>
</section>
<section id="section2">
  <h2>Section 2</h2>
  <p>This is section 2 content.</p>
</section>
<section id="section3">
  <h2>Section 3</h2>
  <p>This is section 3 content.</p>
</section>

CSS:

section {
  display: none;
}

section:target {
  display: block;
}

在这个例子中，当用户点击导航链接时，对应的section元素会显示出来，因为:target伪类使得对应的元素display属性变为block。

可能遇到的问题及解决方法

如果你遇到了:target伪类不起作用的问题，可能的原因包括：

ID选择器错误：确保HTML元素的id属性与链接的href属性中的hash值完全匹配。
CSS优先级问题：可能有其他CSS规则的优先级更高，覆盖了:target伪类的样式。检查是否有更具体的选择器或其他伪类影响了目标元素。
浏览器兼容性：虽然:target伪类在现代浏览器中得到了广泛支持，但在一些旧版本的浏览器中可能不被支持。确保你的目标用户群体使用的浏览器版本支持:target伪类。

解决方法：