Ubuntu Linux顶部栏CSS样式异常及nth-child选择器失效问题咨询

问题1：切换到桌面时顶部栏文本颜色不生效 #

原因 #

GNOME Shell 顶部栏会根据当前焦点窗口状态加载不同的样式规则：当焦点在普通应用窗口时，匹配你写的默认样式；当焦点切到桌面（本质是Nautilus文件管理器的桌面窗口）时，系统默认主题会通过更高优先级的状态类选择器覆盖color属性，因此只有color被重置，其余样式仍生效。

解决方法 #

提高自定义样式的优先级，同时匹配桌面状态下的顶部栏类，修改代码如下：

/* 匹配所有状态下的顶部栏按钮文本 */
#panel .panel-button,
#panel.solid .panel-button,
#panel:overview .panel-button,
#panel.desktop-focused .panel-button {
    color: green !important;
}

修改完成后按Alt + F2，输入r回车重启GNOME Shell即可生效。如果是Ubuntu 22.04及以上使用Wayland显示协议的环境，需要注销后重新登录。

问题2：nth-child选择器不生效 #

原因 #

GNOME Shell 顶部栏的结构分为三个独立容器：左侧功能区#panelLeft、中间日期区#panelCenter、右侧系统托盘区#panelRight，所有.panel-button元素分别放在这三个容器下，不是直接作为#panel的子元素。直接写#panel .panel-button:nth-child(1)会匹配三个容器各自的第一个按钮，且会被默认样式覆盖，无法生效。

解决方法 #

明确指定要选择的按钮所在的容器，示例如下：

/* 匹配左侧区域第一个按钮（通常是活动按钮） */
#panelLeft .panel-button:nth-child(1) {
    color: red !important;
}

/* 匹配右侧区域第一个按钮 */
#panelRight .panel-button:nth-child(1) {
    color: blue !important;
}

如果要选中固定功能的按钮，也可以直接用对应元素id选择，优先级更高，比如活动按钮的id是#panelActivities，可直接写：

#panelActivities {
    color: green !important;
}

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