Gtk.CssProvider（）基于ID的选择器如何在Gtk3中工作？

Question

我已经反复研究了几天，但似乎无法解决可能出现的问题。

本质上，我正在尝试使用CSS样式声明在Gtk3中设置一些Gtk窗口小部件的样式，这并不复杂，只是尝试通过其id /名称来定位特定元素。Gtk.CssProvider（）的Gtk文档说

#widgetname { background-color: #333333; }

应该可以将其名称设置为“ widgetname”的窗口小部件用作有效的选择器，但我似乎无法使其正常工作。我本来以为是CSS无法加载，但是我可以像这样定位顶级窗口小部件：

GtkWindow { background-color: #333; }

它将样式应用于窗口，我可以看到背景颜色已更改。我尝试使用名称作为几个不同类型的小部件（GtkEventBox，GtkTextView，GtkStatusBar，GtkBox）的ID，而基于ID的选择器似乎不起作用。

这是我如何加载CSS的简短片段：

css = Gtk.CssProvider()

# css.load_from_file(file)
css.load_from_data('''

GtkWindow {
    background-color: #333;
}

GtkEventBox {
    background-color: #333;
}

#statusbarwrap, #textview_event_wrap, #box1 {
     background-color: #333;
}

''')

style_context = self.get_style_context()
style_context.add_provider(
    css,
    Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION)

这是GtkCssProvider的文档https://developer.gnome.org/gtk3/3.7/GtkCssProvider.html

该页面上的示例24（只需向下滚动一两页）就表明#ID选择器有效，并且我正在Glade中设置小部件的名称。

任何帮助将不胜感激。

Answer 1

我们可以使用“ gtk_widget_set_name（）”为该小部件命名（ID）。

win = Gtk.Window()
win.set_name('main_window')

那么“ #main_window”可以用作CSS3中的ID选择器：

#main_window {
  background-color: ...
}

如果使用文本编辑器打开林间空地文件，您会发现小部件的名称实际上被标记为id，如下所示：

<object class="GtkWindow" id="window1">

请注意，小部件的名称不应包含*，＃或>之类的特殊字符，它们是CSS语法的一部分。

Answer 2

下面是一个完整的例子，我在这里发布它是为了澄清 Gtk3+CSS 中名称和 ID 之间的混淆：

德语.py：

# coding: utf-8
from gi.repository import Gtk, Gdk
import time

builder = Gtk.Builder()
builder.add_from_file("german.glade")
builder.connect_signals({"closeApplication": Gtk.main_quit})

screen = Gdk.Screen.get_default()

css_provider = Gtk.CssProvider()
css_provider.load_from_path('german.css')

context = Gtk.StyleContext()
context.add_provider_for_screen(screen, css_provider,
  Gtk.STYLE_PROVIDER_PRIORITY_USER)

window = builder.get_object("applicationwindow1")
window.show_all()

Gtk.main()

德语.css :

#blackBox {
  background-color: black;
}
#redBox {
  background-color: red;
}
.goldBox {
  background-color: gold;
}

德国.glade :

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated with glade 3.16.1 -->
<interface>
  <requires lib="gtk+" version="3.0"/>
  <object class="GtkApplicationWindow" id="applicationwindow1">
    <property name="can_focus">False</property>
    <signal name="delete-event" handler="closeApplication" swapped="no"/>
    <child>
      <object class="GtkBox" id="box1">
        <property name="visible">True</property>
        <property name="can_focus">False</property>
        <property name="orientation">vertical</property>
        <child>
          <object class="GtkEventBox" id="blackBox">
            <property name="visible">True</property>
            <property name="can_focus">False</property>
            <child>
              <placeholder/>
            </child>
          </object>
          <packing>
            <property name="expand">True</property>
            <property name="fill">True</property>
            <property name="position">0</property>
          </packing>
        </child>
        <child>
          <object class="GtkEventBox" id="eventbox2">
            <property name="name">redBox</property>
            <property name="visible">True</property>
            <property name="can_focus">False</property>
            <child>
              <placeholder/>
            </child>
          </object>
          <packing>
            <property name="expand">True</property>
            <property name="fill">True</property>
            <property name="position">1</property>
          </packing>
        </child>
        <child>
          <object class="GtkEventBox" id="eventbox3">
            <property name="visible">True</property>
            <property name="can_focus">False</property>
            <child>
              <placeholder/>
            </child>
            <style>
              <class name="goldBox"/>
            </style>
          </object>
          <packing>
            <property name="expand">True</property>
            <property name="fill">True</property>
            <property name="position">2</property>
          </packing>
        </child>
      </object>
    </child>
  </object>
</interface>

结果：

三个盒子垂直排列，就像德国国旗一样。除了第一个框不是黑色的，因为#name 指的是具有匹配“name”属性的对象，而不是具有该 id 的对象。

我花了一段时间才弄明白。我自己是 Gtk3 的新手...