Streamlit中st.html修改样式未按预期生效的原因及解决方法

原因 #

你遇到的问题是因为Streamlit页面中，通过st.html插入的CSS样式属于全局样式。如果两次插入的代码都直接用hr标签作为选择器设置颜色，后插入的样式规则会覆盖之前的——浏览器会优先加载并应用最后定义的同选择器样式，导致两个分割线都变成后设置的蓝色。

解决办法 #

有两种简单可行的方案：

• 方案1：使用内联样式
  直接在每个<hr>标签的style属性里定义颜色，样式仅作用于当前元素，不会互相干扰：

  st.html('<hr style="border: none; border-top: 2px solid red; margin: 1rem 0;">')
  st.html('<hr style="border: none; border-top: 2px solid blue; margin: 1rem 0;">')
  

• 方案2：给分割线添加唯一类名
  为每个分割线设置不同的class，再针对类名写CSS样式，确保样式作用范围精准：

  # 红色分割线
  st.html('''
  <style>
  .red-divider {
      border: none;
      border-top: 2px solid red;
      margin: 1rem 0;
  }
  </style>
  <hr class="red-divider">
  ''')
  
  # 蓝色分割线
  st.html('''
  <style>
  .blue-divider {
      border: none;
      border-top: 2px solid blue;
      margin: 1rem 0;
  }
  </style>
  <hr class="blue-divider">
  ''')
  

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