javascript - 根据 更改链接颜色

Question

我有一个聊天记录，在聊天中我想将 customer 发送的链接颜色更改为红色，同时保留 agent 发送的链接蓝色。

我怎样才能在 CSS 中或在 jQuery 中更好地实现这一点。我尝试了下面的 CSS，但没有用

.CustomerPost a{
        color: white;
    }

<span class="MessagePost">
  <img alt="" src="images/agent.png">
  <span class="Agent">Agent: </span>
    <span class="Message">How may I help you?</span>
  </span>

<span class="MessagePost CustomerPost">
  <img alt="" src="images/user.png">
  <span class="User">Customer: </span>
    <span class="Message">Hi, I need help!<a href="#">www.google.com</a></span>
</span>

Answer 1

兄弟选择器

.Agent,
.Agent + .Message {
  color: blue
}

.User,
.User + .Message {
  color: red
}

<span class="MessagePost">
  <img alt="" src="images/agent.png">
  <span class="Agent">Agent: </span>
    <span class="Message">How may I help you?</span>
  </span>

<span class="MessagePost CustomePost">
  <img alt="" src="images/user.png">
  <span class="User">Customer: </span>
    <span class="Message">Hi, I need help!</span>
</span>

如果您想要链接，请在选择器之后添加 a。

.Agent + .Message a {
  color: blue
}

.User + .Message a {
  color: red
}

<span class="MessagePost">
  <img alt="" src="images/agent.png">
  <span class="Agent">Agent: </span>
    <span class="Message">How may I help you? <a href="#">agent</a></span>
  </span>

<span class="MessagePost CustomePost">
  <img alt="" src="images/user.png">
  <span class="User">Customer: </span>
    <span class="Message">Hi, I need help! <a href="#">user</a></span>
</span>