当前位置: 首页 > 知识库问答 >
问题:

.css文件,::first line不可能。如何实现这一点?Ubuntu 18.04版

习阳
2023-03-14

乌班图 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('时钟显示');我想我必须指定它的<代码>pseudo_calss或东西,但我没有任何想法。

通过使用时钟覆盖扩展,有可能使我们自己的文本..就像这张图片..

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

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

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

它是可以实现的吗?

此处所有相关文件:https://we transfer . com/downloads/dd97a 53972 b 17 f 746225 EFD fa 345 a 03220181231063516/111 ced

共有2个答案

袁博
2023-03-14

试试看。除非你的文本被认为是一行,否则它是有效的。

#panel .clock-display {
    color: blue;
    margin-left: 40px;
    margin-right: 40px;
}

#panel .clock-display::first-line {
height: 40px;
  width: device-width;
   background:  blue;}

.barfont {

  height: 30px;
  width: device-width;
  color:  blue;
font-size:15px;
font-weight: bold;
line-height:0px;



}
.barbackground {
margin: 0;
padding: 0;
  height: 30px;
  width: device-width;
background-color: green;
 border-top-style: solid;
  border-top-color: green;
line-height:0px;
}
html lang-html prettyprint-override"><html>
<body background="https://i.stack.imgur.com/80hPG.png" >
<div class="barbackground"> 
<p class="barfont">data  &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp  &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp day  first link </p></div>
</body>
</html>
欧阳晗日
2023-03-14

您可以尝试将样式类添加到特定对象吗?

例如:#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; }
 类似资料:
  • 如图中箭头所示的阴影如何实现?

  • 本文向大家介绍javascript中不提供sleep功能如何实现这个功能,包括了javascript中不提供sleep功能如何实现这个功能的使用技巧和注意事项,需要的朋友参考一下 javascript中不提供sleep功能,而我们时长会用到这个功能。 有一种思路是跑一段循环体,让程序空耗CPU的时间来实现延时。这有一个不足,不同的机器CPU的执行速度是不一样的,这很容易导致的慢的机器会SLEEP很

  • html 代码 1,2,3 是自增长的 后来我试了下 ol-li 标签, 但是列表头样式不知道怎么调..

  • 请查看以下代码片段: 我需要弄清楚每一行的意思,有点让我困惑。

  • 本文向大家介绍CSS如何实现动画?相关面试题,主要包含被问及CSS如何实现动画?时的应答技巧和注意事项,需要的朋友参考一下 参考回答: 创建动画序列,需要使用animation属性或其子属性,该属性允许配置动画时间、时长以及其他动画细节,但该属性不能配置动画的实际表现,动画的实际表现是由 @keyframes规则实现,具体情况参见使用keyframes定义动画序列小节部分。 transition也