javascript - .css 文件，::第一行不可能。如何做到这一点？ Ubuntu 18.04

Question

Ubuntu 18.04

我正在自定义面板，这是.css文件中的内容
我添加了 ::first-line 部分来自定义第一行，如下图所示。但重启后不会应用。

.css 文件的内容:

#panel .clock-display {
    color: blue; }

#panel .clock-display::first-line {
    color: green; }

.js 文件的内容:

var DateMenuButton = new Lang.Class({
    Name: 'DateMenuButton',
    Extends: PanelMenu.Button,

    _init() {
        let item;
        let hbox;
        let vbox;

        let menuAlignment = 0.5;
        if (Clutter.get_default_text_direction() == Clutter.TextDirection.RTL)
            menuAlignment = 1.0 - menuAlignment;
        this.parent(menuAlignment);

        this._clockDisplay = new St.Label({ y_align: Clutter.ActorAlign.CENTER });
        this._indicator = new MessagesIndicator();

        let box = new St.BoxLayout();
        box.add_actor(new IndicatorPad(this._indicator.actor));
        box.add_actor(this._clockDisplay);
        box.add_actor(this._indicator.actor);

        this.actor.label_actor = this._clockDisplay;
        this.actor.add_actor(box);
        this.actor.add_style_class_name ('clock-display');

在最后一行 this.actor.add_style_calss_name ('clock-display'); 我想我必须指定它的 pseudo_calss 或其他东西，但我不知道.

在下图中，如果您看到带有时间戳的日期，这是新安装 Ubuntu 时的默认行为。

通过使用时钟覆盖扩展，可以制作我们自己的文本..就像这张图片..

这里有一条线索，这个时钟覆盖扩展有一个特殊的功能，可以通过在其设置中添加 %n 来创建下一行 https://developer.gnome.org/glib/stable/glib-GDateTime.html#g-date-time-format

时钟覆盖扩展详细信息:https://extensions.gnome.org/extension/1206/clock-override/

问题:我希望在 .css 文件中独立配置这两行，以选择颜色、高度、粗细、阴影、边框等。

是否可以实现？

所有相关文件在这里: https://wetransfer.com/downloads/dd97a53972b17f746225efdfa345a03220181231063516/111ced

Answer 1

能否尝试为特定对象添加样式类？

例如:#line 475

this._clockDisplay = new St.Label({ y_align: Clutter.ActorAlign.CENTER, style_class: 'clock-label' });

CSS:

.clock-label { color: #101010; font-weight: bold; background: #fff; }