CSSの同じ要素の色が異なる

Question

Fontawesome Arrowアイコンの色を黒に変更するためにこれを私のホームページに追加しましたが、同じページに別の矢印があります。矢印は白で表示する必要があります。 1つの矢印を黒にし、別の矢印を白にして同じページに表示するには、どのようなCSSコードを追加しますか？

.page-id-45 a.sf-button.sf-button-has-icon > i { 
     font-size: 18px; 
     margin-left: 10px; 
     vertical-align: -3px; 
     color: #333; 
    } 

Answer 1

あなたはHTMLであなたの<class=""><style="color: 000;">を置くことができます。インラインスタイルはクラスの色をオーバーライドする必要があります。

あなたが頻繁にやっているのであれば、私は2番目のクラスを提案したいと思います。

Answer 2

〜iを追加すると、最初の矢印以外のすべてに色が適用されます。

.page-id-45 a.sf-button.sf-button-has-icon > i { 
    font-size: 18px; 
    margin-left: 10px; 
    vertical-align: -3px; 
    color: #fff; /* Color of the first arrow of you page */ 
} 
.page-id-45 a.sf-button.sf-button-has-icon > i ~ i { 
    font-size: 18px; 
    margin-left: 10px; 
    vertical-align: -3px; 
    color: #333; /* Color of all other arrows */ 
} 

これはすばやい解決策のようなものです。