Javascript .css文件：：第一行不可能。如何做到这一点？Ubuntu 18.04

Ubuntu 18.04

我正在自定义面板，这是.css文件中的内容
我已经添加了

：：first-line

部分，以便对第一行进行自定义，如下图所示。但它在重新启动后不会应用

.css文件的内容：

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');

#面板。时钟显示{
颜色：蓝色；}
#面板。时钟显示：：一线{
颜色：绿色；}

.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'）我想我必须指定它的
伪计算
或其他什么，但我不知道

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

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


这里有一个线索，这个时钟覆盖扩展有一个特殊功能，通过在其设置中添加
%n
来生成下一行

时钟覆盖扩展详细信息：

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

这是可以实现的吗

此处的所有相关文件：
能否尝试向特定对象添加样式类

例如：#第475行

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

CSS:

试试看。
除非您的文本被视为一行，否则它将起作用


#面板。时钟显示{
颜色：蓝色；
左边距：40px；
右边距：40px；
}
#面板。时钟显示：：一线{
高度：40px；
宽度：设备宽度；
背景：蓝色；}
.barfont{
高度：30px；
宽度：设备宽度；
颜色：蓝色；
字体大小：15px；
字体大小：粗体；
线高：0px；
}
barbackground先生{
保证金：0；
填充：0；
高度：30px；
宽度：设备宽度；
背景颜色：绿色；
边框顶部样式：实心；
边框顶部颜色：绿色；
线高：0px；
}

数据第一天链接

尝试
第一个孩子
而不是
第一行
或
时钟显示：插入0px 40px 0 0绿色
谢谢您的评论。。我试了第一个。。但是没有改变。。第二个。。我搞砸了是否把它做成
#面板。时钟显示{inset opx 40px 0 0绿色；}
我们也不需要在中编辑任何内容。js文件来说明这是与伪元素相关的。。正如我在一些文档中所读到的，要配置第一行。。伪相关。但我的观察结果是，native.js文件缺少它。。无论如何，我对js一无所知。。请引导我……对不起。更正上述评论。第一个孩子写了蓝色，把两行都改成了绿色。你走错方向了。不能在JS中指定伪元素。您只能在JS中指定类。您必须在CSS中定义伪元素。我怀疑，这种情况下的问题在于
#面板。时钟显示
不是块元素<代码>：：第一行
仅适用于块元素。是否可以共享JS生成的HTML？也请检查此答案。您可能需要更改主题css样式，而不是时钟扩展。嗨，谢谢你的回答。我已经按照你在回答中提到的做了第475行，然后对CSS做了修改。时钟标签工作，但它仍然适用于两条线..我坚信时钟覆盖扩展涉及。以覆盖时钟文本。。它只在一行中输入。但是当添加
%n
时，它会使文本显示在下一行中。示例：要显示的文本而不是时钟=
%H:%M%n%a，%d.%h
好的。您可以尝试以下方法：#panel.clock label:first child它本可以工作，但我们不太了解css结构。鉴于此，请尝试另一种方法：。时钟标签：first child{color:#101010；字体重量：粗体；背景：#fff；}希望它能起作用。我试过了。。但是当给第一个子元素时，它仍然为两行使用
时钟标签{color
。如果我删除
时钟标签{color
行，如果我只保留第一个孩子..它将采用默认的白色并忽略第一个孩子。尝试添加！在结尾处添加！重要的是你的新样式。我知道它效率不高，但我正在尝试解决它。示例：color:#101010！重要；嗨，谢谢你的回答..我尝试了你在回答中提到的内容。但是它没有改变第一行和第二行。所做的任何更改都应用于这两行。更改应该在
时钟显示中
而不是
第一行中
。我完全尝试了您在回答中提到的内容。但是更改都应用于这两行。请显示结果的打印屏幕。单词a
a活动
不在同一个类中
时钟显示
。因此，找到该类并更改颜色，或者您可以在CSS中使用“[word=“Activities”]”。