Streamlit多页面应用侧边栏文本样式（颜色/字体/位置）修改求助

我使用Streamlit 1.13.0版本开发多页面应用，目前无法修改侧边栏中Homepage、Application、Contact文本的背景颜色、字体粗细和位置。在Homepage.py中尝试通过自定义CSS样式实现修改，但其中一段代码无效，希望调整这些文本的颜色、字体及位置，相关代码如下：

import streamlit as st

st.set_page_config(
        page_title= "Multipage App",
        page_icon="📁")


st.title("Main Page")

st.markdown('<style>div[class="css-6qob1r e1fqkh3o3"] {color:black; font-weight: 900; background: url("https://media2.giphy.com/media/46hpy8xB3MiHfruixn/giphy.gif");background-repeat: no-repeat;background-size:350%;} </style>', unsafe_allow_html=True)


st.markdown('<style>div[class="css-y3drt2 e1fqkh3o5"] {color:red; } </style>', unsafe_allow_html=True)#NOT WORKING-------------------------------------------

当前效果截图：

Streamlit的动态CSS类名会随版本更新变化，你使用的css-y3drt2 e1fqkh3o5这类临时类名是导致代码失效的核心原因，推荐使用更稳定的选择器定位侧边栏导航元素：

方法1：使用固定测试ID定位（最可靠） #

Streamlit的侧边栏导航组件有固定的data-testid属性，不受版本更新影响，直接针对导航链接设置样式：

import streamlit as st

st.set_page_config(
        page_title= "Multipage App",
        page_icon="📁")

# 自定义侧边栏导航样式
st.markdown("""
<style>
/* 定位侧边栏所有导航链接 */
[data-testid="stSidebarNav"] li a {
    color: black; /* 文本颜色 */
    font-weight: 900; /* 字体粗细 */
    font-size: 16px; /* 字体大小 */
    padding: 10px 15px; /* 调整文本位置（上下左右内边距） */
    background: url("https://media2.giphy.com/media/46hpy8xB3MiHfruixn/giphy.gif");
    background-repeat: no-repeat;
    background-size: 350%;
    display: block; /* 确保样式生效 */
}

/* 可选：鼠标悬停时的样式 */
[data-testid="stSidebarNav"] li a:hover {
    color: #ff4b4b;
    background-color: rgba(255,255,255,0.8);
}
</style>
""", unsafe_allow_html=True)

st.title("Main Page")

方法2：使用层级选择器定位（兼容旧版本） #

如果测试ID方式不生效，可通过侧边栏的父容器层级定位导航链接：

st.markdown("""
<style>
/* 侧边栏导航项容器 */
.css-1lcbmhc.e1fqkh3o0 a {
    color: red;
    font-weight: bold;
    padding: 8px 0;
    background-color: #f0f2f6;
}
</style>
""", unsafe_allow_html=True)

关键说明 #

• 调整padding属性可以改变文本在侧边栏中的位置（上下左右间距）
• 字体相关属性（font-weight、font-size、font-family）可根据需求自由添加
• 背景图设置需确保图片链接可访问，background-size控制图片缩放比例

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