如何为ipywidgets中的Tab组件标题设置样式？

ipywidgets的Tab组件本身没有提供直接设置标题样式的style属性，官方样式文档也主要聚焦于部件自身而非容器元素，但我们可以通过注入自定义CSS来实现Tab标题的样式定制，不管是统一设置还是单独给0-4号的特定Tab设置样式都可行。

先看你给出的基础代码：

import ipywidgets as widgets

tab_contents = ['P0', 'P1', 'P2', 'P3', 'P4']
children = [widgets.Text(description=name) for name in tab_contents]
tab = widgets.Tab()
tab.children = children
tab.titles = [str(i) for i in range(len(children))]
tab

1. 统一设置所有Tab标题样式 #

通过注入CSS规则，可以给所有Tab标题设置统一的字体、颜色、背景等样式，还能定制选中状态的外观：

from IPython.display import display, HTML

# 注入统一样式
display(HTML("""
<style>
    /* 所有未选中的Tab标题 */
    .jupyter-widgets-tab > .p-TabBar .p-TabBar-tab {
        font-size: 14px;
        color: #2c3e50;
        background-color: #ecf0f1;
        padding: 8px 16px;
        border-radius: 4px 4px 0 0;
        margin-right: 4px;
    }
    /* 选中状态的Tab标题 */
    .jupyter-widgets-tab > .p-TabBar .p-TabBar-tab.p-mod-selected {
        background-color: #3498db;
        color: white;
        border: none;
    }
</style>
"""))

display(tab)

2. 单独设置特定编号的Tab标题 #

如果要给0-4号中的某个或某几个Tab单独设置样式，可以用CSS的nth-child选择器定位注意：CSS的nth-child是从1开始计数的，所以第0号Tab对应nth-child(1)，第1号对应nth-child(2)，以此类推。

比如给第0号Tab设置红色粗体，第2号Tab设置绿色背景：

display(HTML("""
<style>
    /* 第0号Tab标题 */
    .jupyter-widgets-tab > .p-TabBar .p-TabBar-tab:nth-child(1) {
        color: #e74c3c;
        font-weight: bold;
    }
    /* 第2号Tab标题 */
    .jupyter-widgets-tab > .p-TabBar .p-TabBar-tab:nth-child(3) {
        background-color: #2ecc71;
        color: white;
    }
</style>
"""))

display(tab)

原理说明：ipywidgets的Tab组件在前端渲染时会生成带有特定类名的DOM元素，我们通过定位这些类名编写CSS规则，就能直接修改Tab标题的样式。

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