C++ GTK应用CSS样式未生效：如何用选择器设置元素样式

问题概述 #

开发C++ GTK应用时，尝试通过CSS实现暗色模式，已创建style.css并定义样式，但GtkTextView、侧边栏等控件的样式未按预期生效：仅背景样式起作用，文本颜色等其他样式无变化；使用ID/类选择器定位元素，但存在选择器不匹配、复杂控件样式层级问题。

主文件代码 #

void load_css(void) {
    GtkCssProvider *provider;
    GdkDisplay *display;
    GdkScreen *screen;

    provider = gtk_css_provider_new();
    display = gdk_display_get_default();
    screen = gdk_display_get_default_screen(display);

    gtk_style_context_add_provider_for_screen(screen, GTK_STYLE_PROVIDER(provider), GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);

    const gchar *css_file = "src/style.css";
    GError *error = 0;
    gtk_css_provider_load_from_file(provider, g_file_new_for_path(css_file), &error);

    if (error) {
        g_warning("%s", error->message);
        g_clear_error(&error);
    }

    g_object_unref(provider);
}

int main(int argc, char *argv[]) {
    gtk_init(&argc, &argv);

    GtkWidget *window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
    gtk_window_set_title(GTK_WINDOW(window), "yarncode");
    gtk_window_set_default_size(GTK_WINDOW(window), 600, 800);
    g_signal_connect(window, "destroy", G_CALLBACK(gtk_main_quit), NULL);

    GtkWidget *box = gtk_box_new(GTK_ORIENTATION_VERTICAL, 0);
    gtk_container_add(GTK_CONTAINER(window), box);

    GtkWidget *header = gtk_header_bar_new();
    gtk_box_pack_start(GTK_BOX(box), header, FALSE, FALSE, 0);

    GtkWidget *button = gtk_button_new_with_label("<<");
    gtk_header_bar_pack_start(GTK_HEADER_BAR(header), button);

    GtkWidget *content_box = gtk_box_new(GTK_ORIENTATION_VERTICAL, 0);
    gtk_box_pack_start(GTK_BOX(box), content_box, TRUE, TRUE, 0);

    GtkWidget *paned = gtk_paned_new(GTK_ORIENTATION_HORIZONTAL);
    gtk_box_pack_start(GTK_BOX(content_box), paned, TRUE, TRUE, 0);

    text_view = gtk_source_view_new();
    gtk_widget_set_name(text_view, "text-view");
    gtk_source_view_set_show_line_numbers(GTK_SOURCE_VIEW(text_view), TRUE);
    gtk_source_view_set_highlight_current_line(GTK_SOURCE_VIEW(text_view), TRUE);

    GtkWidget *text_scrolled_window = gtk_scrolled_window_new(NULL, NULL);
    gtk_container_add(GTK_CONTAINER(text_scrolled_window), text_view);
    gtk_paned_add2(GTK_PANED(paned), text_scrolled_window);

    sidebar_window = gtk_scrolled_window_new(NULL, NULL);
    gtk_widget_set_name(sidebar_window, "sidebar-window");
    gtk_scrolled_window_set_min_content_width(GTK_SCROLLED_WINDOW(sidebar_window), 200);
    gtk_widget_set_size_request(sidebar_window, 200, -1);
    gtk_paned_add1(GTK_PANED(paned), sidebar_window);

    gtk_paned_set_position(GTK_PANED(paned), 200); 

    GtkTreeStore* store = gtk_tree_store_new(1, G_TYPE_STRING);
    GtkWidget* tree_view = gtk_tree_view_new_with_model(GTK_TREE_MODEL(store));
    gtk_container_add(GTK_CONTAINER(sidebar_window), tree_view);

    GtkTreeViewColumn* column = gtk_tree_view_column_new_with_attributes("Files", gtk_cell_renderer_text_new(), "text", 0, NULL);
    gtk_tree_view_append_column(GTK_TREE_VIEW(tree_view), column);

    GtkTreeIter root_iter;
    gtk_tree_store_append(store, &root_iter, NULL);
    gtk_tree_store_set(store, &root_iter, 0, ".", -1);
    populate_file_tree(store, &root_iter, ".");

    GtkTreePath* root_path = gtk_tree_path_new_from_string("0");
    gtk_tree_view_expand_row(GTK_TREE_VIEW(tree_view), root_path, FALSE);
    gtk_tree_path_free(root_path);

    GtkWidget *command_box = gtk_box_new(GTK_ORIENTATION_VERTICAL, 0);
    gtk_box_pack_start(GTK_BOX(box), command_box, FALSE, FALSE, 0);

    output_label = gtk_label_new("");
    gtk_widget_set_name(output_label, "label");
    gtk_widget_set_opacity(output_label, 0.0);
    gtk_box_pack_start(GTK_BOX(command_box), output_label, FALSE, FALSE, 0);

    GtkWidget *entry = gtk_entry_new();
    gtk_box_pack_start(GTK_BOX(command_box), entry, FALSE, FALSE, 0);
    gtk_entry_set_placeholder_text(GTK_ENTRY(entry), "Enter command...");
    g_signal_connect(entry, "activate", G_CALLBACK(on_entry_activate), NULL);

    load_css();

    gtk_widget_show_all(window);

    g_signal_connect(button, "clicked", G_CALLBACK(toggle_sidebar), sidebar_window);
    g_signal_connect(entry, "key-press-event", G_CALLBACK(on_entry_key_press), NULL);

    gtk_main();

    return 0;
}

原style.css代码 #

window {
    background-color: #ff0000;
}

#text-view {
    background-color: #ff0000;
}

#sidebar {
    background-color: #ff0000;
    color: #ffffff;
}

#output-label {
    background-color: #ff0000;
    color: #ffcc00; 
}

#entry {
    background-color: #ff0000;
    color: #ffffff;
}

#sidebar-tree-view {
    background-color: #333333;
    color: #ffffff;
}

#sidebar-tree-view row {
    background-color: #e40000;
    color: #ffffff;
}

解决步骤 #

1. 修正ID选择器不匹配问题 #

原代码中部分控件的ID与CSS选择器不一致，导致样式无法命中：

• 侧边栏窗口ID为sidebar-window，CSS中用了#sidebar → 改为#sidebar-window
• 输出标签ID为label，CSS中用了#output-label → 代码中修改为gtk_widget_set_name(output_label, "output-label");
• 输入框未设置ID → 添加gtk_widget_set_name(entry, "entry");
• 侧边栏TreeView未设置ID → 添加gtk_widget_set_name(tree_view, "sidebar-tree-view");

2. 针对复杂GTK控件调整样式层级 #

GTK的复杂控件（如GtkSourceView、GtkTreeView）内部有子元素，直接设置控件本身的样式可能无法覆盖内部元素：

• GtkSourceView：文本颜色需要设置内部text元素的样式
• GtkTreeView：行样式需要针对row伪类，同时CellRenderer的颜色需要通过TreeView样式继承或直接设置

3. 优化CSS样式（暗色模式示例） #

修改后的style.css：

/* 全局窗口样式 */
window {
    background-color: #1e1e1e;
}

/* 代码编辑器区域 */
#text-view {
    background-color: #1e1e1e;
}
#text-view text {
    color: #d4d4d4;
}
#text-view .linenumber {
    color: #666666;
    background-color: #252525;
}

/* 侧边栏滚动窗口 */
#sidebar-window {
    background-color: #2d2d2d;
}

/* 侧边栏文件树 */
#sidebar-tree-view {
    background-color: #2d2d2d;
    color: #d4d4d4;
}
#sidebar-tree-view row {
    background-color: #2d2d2d;
}
#sidebar-tree-view row:selected {
    background-color: #0e639c;
    color: #ffffff;
}

/* 输出标签 */
#output-label {
    background-color: #1e1e1e;
    color: #ffcc00;
}

/* 命令输入框 */
#entry {
    background-color: #2d2d2d;
    color: #d4d4d4;
    border: 1px solid #4e4e4e;
}

4. 调整CSS加载时机 #

将load_css()调用移至gtk_init之后、控件创建之前，确保样式在控件初始化时就被应用：

int main(int argc, char *argv[]) {
    gtk_init(&argc, &argv);
    load_css(); // 提前加载CSS

    // 后续控件创建代码...
}

5. 验证CSS路径正确性 #

确保src/style.css的路径是相对于可执行文件的正确路径，可先用绝对路径测试，确认文件能被正确加载。

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