同じCSSクラスのいくつかの色は？

Question

私はウェブサイトを作り、ユーザーフォーラムを開いています。私は、私がやったランクシステムに基づいて、異なるユーザーにタグを割り当てたいと思いますが、私は1つのクラスに複数の異なる色を割り当てる方法（CSSのみ）が必要です。たとえば、タグは[TAGTEXT]の形式であり、角括弧を1つの色に、テキストを別の色にすることができます。すべての助けをいただければ幸いです！

これは私が特定の文字で色を変更する方法がわからないだとして、私は、これまでのコードの面で持っているすべてです：ちょうどいくつかのスパンでそのテキストを折り返す

.normaltag { color: red; }

Answer 1

また、1つの要素とでこれを行うことができますおよび:after疑似要素。

.el { 
 
    position: relative; 
 
    display: inline-block; 
 
    color: green; 
 
    margin: 20px; 
 
    padding: 0 10px; 
 
} 
 
.el:before, 
 
.el:after { 
 
    content: ""; 
 
    position: absolute; 
 
    top: -2px; 
 
    height: 100%; 
 
    width: 5px; 
 
    border: 3px solid red; 
 
} 
 
.el:before { 
 
    border-right: none; 
 
    left: 0; 
 
} 
 
.el:after { 
 
    right: 0; 
 
    border-left: none; 
 
} 
 
.second { 
 
    font-size: 50px; 
 
    color: blue; 
 
}

<div class="el">TAGTEXT</div> 
 
<br> 
 
<div class="el second">TAGTEXT</div>

Answer 2

.tag { 
 
    color: green; 
 
} 
 
.tag.blue span { 
 
    color: blue; 
 
} 
 
.tag.red span { 
 
    color: red; 
 
}

<span class="tag red">[<span>TAGTEXT</span>]</span> 
 
<span class="tag blue">[<span>TAGTEXT</span>]</span>