如何为GtkGrid中的所有Label添加CSS样式上下文提供器？现有方法无效

这个问题我之前也踩过坑，核心原因是你把CSS Provider添加到了GtkGrid的样式上下文，但你的CSS选择器label没办法正确匹配Grid内部的Label控件——Grid的样式上下文并不会自动把规则传递给子控件的匹配逻辑里。下面给你几种可行的解决办法：

方法一：将CSS Provider添加到窗口的样式上下文 #

窗口作为顶层容器，把Provider加到它的上下文里，窗口下所有的Label都会匹配到你的CSS规则。修改代码里获取StyleContext的部分即可：

// 替换原来获取grid上下文的代码，改成获取window的上下文
GtkStyleContext *context = gtk_widget_get_style_context(window);
gtk_style_context_add_provider(context, GTK_STYLE_PROVIDER(provider), GTK_STYLE_PROVIDER_PRIORITY_USER);

这样修改后，你原始的CSS规则label {background-color: #AAAAAA;}就能直接生效，因为窗口下的所有Label都会被这个选择器匹配到。

方法二：给GtkGrid加自定义类名，用精确CSS选择器 #

如果你只想让当前Grid里的Label生效，不想影响全局的Label，可以给Grid添加一个自定义类名，再用CSS子选择器定位：

1. 先给Grid添加类名：

   GtkStyleContext *grid_context = gtk_widget_get_style_context(grid);
   gtk_style_context_add_class(grid_context, "custom-grid");
   

2. 修改CSS规则，只针对这个类下的Label：

   gtk_css_provider_load_from_data(provider, ".custom-grid label {background-color: #AAAAAA;}", -1, NULL);
   

3. 最后把Provider添加到Grid或者窗口的上下文都可以，这样只有这个custom-grid容器下的Label会应用背景色。

方法三：单独给每个Label添加Provider #

如果只需要给特定几个Label设置样式，也可以直接给每个Label的StyleContext单独添加Provider：

// 给label1添加样式
GtkStyleContext *label1_context = gtk_widget_get_style_context(label1);
gtk_style_context_add_provider(label1_context, GTK_STYLE_PROVIDER(provider), GTK_STYLE_PROVIDER_PRIORITY_USER);
// 给label2添加样式
GtkStyleContext *label2_context = gtk_widget_get_style_context(label2);
gtk_style_context_add_provider(label2_context, GTK_STYLE_PROVIDER(provider), GTK_STYLE_PROVIDER_PRIORITY_USER);

这种方式适合需要单独控制个别控件样式的场景。

额外提示 #

有时候Label的背景默认是透明的，如果你发现设置了背景色还是看不到，可以在CSS里加上background-opacity: 1;确保背景不透明：

label {
    background-color: #AAAAAA;
    background-opacity: 1;
}

修改后的完整示例代码（方法一） #

#include <gtk/gtk.h>
static void activate (GtkApplication* app, gpointer user_data) {
    GtkWidget *window = gtk_application_window_new (app);
    gtk_window_set_title (GTK_WINDOW (window), "Window1");
    gtk_window_set_default_size (GTK_WINDOW (window), 200, 200);
    GtkWidget *grid = gtk_grid_new ();
    gtk_container_add (GTK_CONTAINER (window), grid);
    GtkWidget *label1 = gtk_label_new("Hello world!");
    gtk_widget_set_hexpand( label1, TRUE);
    gtk_grid_attach(GTK_GRID (grid), label1, 0,0,1,1);
    GtkWidget *label2 = gtk_label_new("Simple Gtk example");
    gtk_widget_set_hexpand( label2, TRUE);
    gtk_grid_attach(GTK_GRID (grid), label2, 0,1,1,1);
    GtkCssProvider *provider = gtk_css_provider_new ();
    // 添加background-opacity确保背景可见
    gtk_css_provider_load_from_data ( provider, "label {background-color: #AAAAAA; background-opacity: 1;}", -1, NULL);
    // 获取窗口的样式上下文并添加provider
    GtkStyleContext *context = gtk_widget_get_style_context (window);
    gtk_style_context_add_provider( context, GTK_STYLE_PROVIDER(provider), GTK_STYLE_PROVIDER_PRIORITY_USER);
    gtk_widget_show_all (window);
}
int main (int argc, char **argv) {
    GtkApplication *app = gtk_application_new( "org.gtk.example", G_APPLICATION_FLAGS_NONE );
    g_signal_connect( app, "activate", G_CALLBACK(activate), NULL);
    int status = g_application_run(G_APPLICATION(app), argc, argv);
    g_object_unref (app);
    return status;
}

内容的提问来源于stack exchange，提问作者Håkon Hægland