如何通过纯CSS实现锚点链接触发input的:checked状态？

可以实现，核心是利用CSS的:target伪类，结合原有的:checked状态逻辑达成需求，无需JavaScript。具体调整如下：

原理说明 #

当点击锚点链接时，链接指向的元素会匹配:target伪类。我们将锚点目标设为checkbox元素，让:target状态触发和:checked相同的样式效果，再通过CSS隐藏checkbox避免视觉干扰。

修改后的代码 #

HTML

<a href="#collapsible-details-historiek">点击展开/收起内容</a>

<div style="margin-top: 750px;">&nbsp;</div>

<!-- 作为锚点目标的checkbox -->
<input class="toggle" id="collapsible-details-historiek" type="checkbox" data-hj-masked="">
<h3>
    <label class="gp-product" for="collapsible-details-historiek">
        <i class="fas fa-history"></i>
        <h4>Title of the item</h4>
    </label>
</h3>
<div class="collapsible-factuur-content" id="details-algemeen">
    Content of the item.
</div>

CSS

/* 隐藏checkbox，避免视觉干扰 */
.toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* 同时支持label点击的checked状态和锚点的target状态 */
.toggle:checked+h3+.collapsible-factuur-content,
.toggle:target+h3+.collapsible-factuur-content {
    background-color: pink;
}

额外优化（可选） #

如果不想点击锚点时页面跳转至checkbox位置，可以给checkbox添加scroll-margin-top属性，调整锚点定位偏移：

.toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    scroll-margin-top: 750px; /* 对应上方空白高度，按需调整 */
}

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