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

Question

试图在聊天应用中实现一个简单的效果，如果用户发消息，他的用户名后面应该总是出现一个 : 但如果是机器人消息，他的消息将有一个 class .bot 和我想覆盖 user:after 以具有不同的内容。

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

.user {
  color: white;
  background: red;
}
.user:after {
  content: ": ";
}
.user:after + .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 1

根据您更新的问题，这里是适合您的代码片段：

.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 2

试试这个

.user:after {
  content: ": ";
}
.user + .bot:after {
  content: "=> ";
}

Answer 3

Note that the current updated question already does what OP is trying to achieve

可以使用::before伪元素

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

.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: "=>";
}

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

Answer 4

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

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

Override after pseudo element on matching element+element css

html

css

pseudo-element