仅用Inline CSS无法实现Div切换，求无JavaScript解决方案

因为元素的inline style属性不支持伪类，纯靠单个元素的style属性没法实现切换逻辑，但可以用内部<style>标签配合CSS的:target伪类完成，全程不需要JavaScript，也不用外部样式文件。

调整后的完整代码如下：

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 内部样式定义伪类规则，属于纯CSS范畴，符合无JS要求 */
    #toggle-target:target ~ #hide1 {
      display: none;
    }
    #toggle-target:target ~ #show1 {
      display: inline !important;
    }
    #toggle-target:target ~ .details {
      display: block !important;
    }
  </style>
</head>
<body>
  <div>
    <!-- 空锚点目标元素，用于触发状态切换 -->
    <div id="toggle-target"></div>
    <a id="hide1" href="#toggle-target" style="display: inline;">+ Expand</a>
    <a id="show1" href="#" style="display: none;">- Collapse</a>
    <div class="details" style="display: none;">
      Content goes here.
    </div>
  </div>
</body>
</html>

原理说明： #

• 点击+ Expand链接时，页面锚点定位到#toggle-target，触发该元素的:target伪类状态
• 通过CSS兄弟选择器~，控制关联元素的显示/隐藏：隐藏展开按钮，显示收起按钮和内容区域
• 点击- Collapse链接时，锚点回到页面顶部（#），:target状态消失，元素恢复初始显示状态

如果严格要求所有样式都写在元素的style属性里，目前没有可行方案——因为CSS伪类是样式表层面的规则，无法通过inline style定义。上面的方案已经是最贴近“仅用内联/内部CSS、无JS”的实现方式。

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