在 Streamlit 中，直接用 st.markdown 渲染原生 无法触发 Python 端交互；正确方案是结合 CSS 选择器（如 :has()）定位由 st.button 生成的真实按钮，并通过 st.button 返回的布尔值捕获点击事件。
在 streamlit 中，直接用 `st.markdown` 渲染原生 `
Streamlit 的核心交互组件（如 st.button）本质上会渲染为标准 HTML <button></button> 元素，但其点击状态由 Streamlit 框架内部管理——这意味着你不能通过纯前端方式（如 onclick 或 addEventListener）可靠获取点击信号，否则将脱离 Streamlit 的状态同步机制，导致行为不可预测或失效。
✅ 正确做法是：保留 st.button 的语义和状态管理能力，仅通过 CSS 覆盖其样式。关键在于利用现代 CSS 选择器（如 :has()）精准定位目标按钮。Streamlit 为每个 st.markdown 元素生成独立的 .element-container 容器，而后续紧邻的组件（如 st.button）会作为其兄弟节点存在。因此，可借助 <span id="run"></span> 占位 + :has(#run) 选择器，实现对“紧随其后的按钮”的样式控制。
以下是完整、可运行的实现示例：
import streamlit as st
# 注入 CSS：使用 :has() 选择器定位紧邻指定 ID 元素之后的 button
st.markdown("""
<style>
/* 为紧跟 <span id="run"> 的按钮应用启用样式 */
.element-container:has(#run) + div button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
font-weight: bold;
}
.element-container:has(#run) + div button:hover {
opacity: 0.8;
}
/* 为紧跟 <span id="dis"> 的按钮应用禁用视觉样式 */
.element-container:has(#dis) + div button {
background-color: #cccccc;
color: #666;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: not-allowed;
width: 100%;
opacity: 0.7;
}
</style>
""", unsafe_allow_html=True)
# 插入锚点 ID，用于 CSS 定位
st.markdown('<span id="run"></span>', unsafe_allow_html=True)
if st.button('✅ Run!'):
st.success("已执行：启用按钮被点击！")
st.markdown('<span id="dis"></span>', unsafe_allow_html=True)
if st.button('⛔ Disabled (UI-only)'):
# 注意：该按钮在 UI 上显示为禁用，但 st.button 本身仍可点击！
# 若需真正禁用逻辑，请用 st.session_state 控制是否响应
st.info("此按钮视觉禁用，但点击仍有效 —— 如需完全禁用，请结合条件判断。")⚠️ 重要注意事项：
立即学习“前端免费学习笔记（深入）”；
-
:has()是较新的 CSS 选择器（Chrome 105+、Edge 105+、Safari 15.4+ 支持），旧版浏览器可能不生效。生产环境建议检测兼容性或提供降级样式。 -
st.button始终返回True仅当本次 rerun 是由该按钮点击触发时，这是 Streamlit 的原子性保证，无需额外状态监听。 - 若需实现“真正禁用”（即点击无响应），不应仅靠 CSS，而应结合逻辑控制，例如：
if st.button('Run!') and enabled: do_something()并配合
st.markdown(..., unsafe_allow_html=True)动态切换:has(#run)/:has(#dis)锚点，以同步视觉与功能状态。
通过该方法，你既能享受完全自由的 CSS 定制能力，又能无缝继承 Streamlit 的状态管理、重绘与交互一致性，是构建专业级 Streamlit 应用界面的最佳实践之一。
