在网页设计中，details 和 summary 元素为用户提供了一种简洁的方式来展示和隐藏内容。然而，默认情况下，点击整个 summary 区域都会触发展开或收起操作。有时，我们希望将点击范围自定义，使其仅对图标起作用，以提供更精准的交互体验。以下将介绍实现这一目标的方法。

HTML 结构方面，常规的 details 和 summary 元素结构类似这样：

<details>
  <summary>
    <span>标题内容</span>
    <i class="icon"></i>
  </summary>
  <p>具体的详细内容</p>
</details>

这里，我们希望点击 这个图标时才触发展开或收起，而不是整个 summary 区域。

接下来是 CSS 样式的设置。我们可以利用 pointer-events 属性来控制元素的鼠标事件响应。对于 summary 元素，我们将其 pointer-events 设置为 none，这样它就不会再响应鼠标点击事件：

summary {
  pointer-events: none;
}

然后，对于图标元素，重新赋予它 pointer-events：

.icon {
  pointer-events: auto;
}

但是这样做可能会带来一个问题，即 summary 中的文本变得不可选了。为了解决这个问题，我们可以在 summary 元素上添加一个额外的层来处理文本选择，同时又不影响图标的点击逻辑。例如，在 summary 内部再嵌套一个 span 元素包裹文本，并为这个 span 元素设置 pointer-events：

<details>
  <summary>
    <span class="text-span">标题内容</span>
    <i class="icon"></i>
  </summary>
  <p>具体的详细内容</p>
</details>

.text-span {
  pointer-events: auto;
}

通过这样的设置，既实现了自定义 details 和 summary 元素的点击范围，让只有图标能够触发展开或收起操作，又保证了文本的可选中性，提升了用户体验。

在实际项目中，还需注意不同浏览器对这些属性的兼容性，进行必要的测试和调整。通过这种方法，能为网页交互设计带来更多的灵活性和精准性，满足多样化的设计需求。