に基づいてリンクの色を変更してください<spans>

Question

私はチャットの中に、customerが送信するリンクの色を変更したい場合は、agentを青色で送信します。

どのようにjQueryでCSSで、あるいはそれ以上の改善を達成できますか？私は、以下の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>

Answer 2

CSS動作しませんでした：

.User .Message a { 
    color: red; 
} 

.Agent .Message a { 
    color: blue; 
} 

Answer 3

。 customerのリンクを白に変えています。白い背景と組み合わせて、あなたはそれを見ない。 ではなく、color: red;と言うようにCSSを変更してください。 agentの送信の場合も同様です。それらを選択するには、.MessagePost:not(.CustomerPost) aを使用します。は、クラスを除いてすべて取得されます。

.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

私は、私はそれが正しいだことを願って、「リンク」によって、あなたがメッセージを意味すると仮定しています。

現時点では、HTMLはエージェントと顧客の両方のメッセージにMessageクラスを使用します。これにより、smidgin間接的な正しいテキストが選択されます。ただし、adjacent sibling selectorを使用すると、2つのクラスの間に+を使用することによって、クラスに基づいて要素の次の兄弟要素である要素を見つけることができます。

 

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