Question

我有聊天记录，在聊天内我想更改customer发送到红色的链接颜色，同时保持agent发送蓝色的链接。

如何在CSS中实现这一点，或者在jQuery中实现更好。我尝试了下面的CSS，但它没有工作

＆＃13;

.CustomerPost a{
        color: white;
    }

＆＃13;

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

＆＃13;

Answer 1

兄弟选择器

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

.Agent + .Message a {
  color: blue
}

.User + .Message a {
  color: red
}

＆＃13;

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

＆＃13;

Answer 2

CSS：

.User .Message a { 
  color: red; 
}

.Agent .Message a { 
  color: blue; 
}

Answer 3

您的代码正在运行;它将customer链接变为白色。结合白色背景，你看不到它。只需将您的CSS更改为color: red;而不是color: white;。链接agent发送的情况也是如此。要选择它们，请使用以下代码：.MessagePost:not(.CustomerPost) a，除了同时拥有类.MessagePost的{{1}}之外，它将获得所有.CustomerPost。

.CustomerPost a {
  color: red;
}
.MessagePost:not(.CustomerPost) a {
  color: blue;
}

<span class="MessagePost">
  <img alt="" src="images/agent.png">
  <span class="Agent">Agent: </span>
  <span class="Message"><a href="#">www.google.com</a></span>
</span>
<br>
<span class="MessagePost CustomerPost">
  <img alt="" src="images/user.png">
  <span class="User">Customer: </span>
  <span class="Message"><a href="#">www.google.com</a></span>
</span>

Answer 4

我假设通过＆＃34;链接＆＃34;你的意思是消息，我希望这是对的。

目前，您的HTML使用Message类来处理来自代理和客户的消息。这使得选择正确的文本是间接的smidgin。但是，您可以使用adjacent sibling selector通过在两个类之间使用+来查找基于类的元素的下一个元素。

＆＃13;

 

<style>
.Agent + .Message {
  color:blue;
}
.User + .Message {
  color:red;
}
</style>

<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>

＆＃13;

根据<spans>更改链接颜色

4 个答案: