在匹配元素+元素css上覆盖伪元素之后

Question

尝试在聊天应用程序中实现简单的效果，如果用户发送消息，在用户名后应始终显示为:，但如果是机器人消息，则他的消息将具有.bot类，我会喜欢覆盖user:after以使其具有不同的内容。

我无法修改html，因为它是动态生成的。

＆＃13;

＆＃13;

.user {
  color: white;
  background: red;
}
.user:after {
  content: ": ";
}
.user:after + .bot {
  content: "=> ";
}

＆＃13;

<span class="user">User1</span>
<span class="message">Hello</span>
<br />
<span class="user">Bot</span>
<span class="bot">Hello</span>

＆＃13;

＆＃13;

＆＃13;

理想情况下，输出应为：

但是css对我来说很好编辑

这有可能吗？或者我应该采用不同的方法。

Answer 1

  

请注意，当前更新的问题已经完成OP正在尝试实现的目标

您可以使用::before伪元素

仅供参考，您可以设置伪元素的样式（就像我一样）

＆＃13;

＆＃13;

.user {
  background: red;
  font-style: italic;
}
.message::before,
.bot::before {
  background: red;
  font-style: italic;
  position: relative;
  left: -4px
}
.message::before {
  content: ":";
}
.bot::before {
  content: "=>";
}

＆＃13;

<span class="user">User1</span>
<span class="message">Hello</span>
<br />
<span class="user">Bot</span>
<span class="bot">Hello</span>

＆＃13;

＆＃13;

＆＃13;

Answer 2

根据您更新的问题，以下是适合您的代码段：

.user + span:before{
    content: ": ";
    /*other rules you assign*/
}

.user + .bot:before { /*overriding just for bot*/
    content: "=> ";
}

<span class="user">User1</span>
<span class="message">Hello</span>
<br />
<span class="user">Bot</span>
<span class="bot">Hello</span>

否则你无法覆盖，因为CSS没有父元素选择器。

Answer 3

试试这个

$ cat file.txt
linux-d
 linux-01  fedora-linux-c
 Solaris_machine1
 AIX-65             linux-redhat18   unixware7-h  unix-digital
       linux56-a     linuxr9

$ cat a.awk
$1 != "" { ac1[++c1] = $1 }
$2 != "" { ac2[++c2] = $2 }
$3 != "" { ac3[++c3] = $3 }
$4 != "" { ac4[++c4] = $4 }
END {
    for (i=1; i<=length(ac1); ++i) {
        printf "%s %s %s %s\n", ac1[i],ac2[i],ac3[i],ac4[i]
    }
}

$ awk -f a.awk file.txt | column -c 4 -t
linux-d           fedora-linux-c  unixware7-h  unix-digital
linux-01          linux-redhat18
Solaris_machine1  linuxr9
AIX-65
linux56-a

Answer 4

目前没有解决这个问题的唯一方法。