同一个 CSS 类中有几种颜色？ [关闭]答案

【问题标题】：Several colours in the same CSS class? [closed]同一个 CSS 类中有几种颜色？ [关闭]
【发布时间】：2016-08-04 13:12:06
【问题描述】：

我正在制作一个网站并拥有一个用户论坛。我想根据我已经完成的等级系统为不同的用户分配标签，但我需要一种方法（仅在 CSS 中）为一个类分配多种不同的颜色。例如，标签采用这种格式：[TAGTEXT]，我希望方括号是一种颜色，而文本是另一种颜色。感谢您提供任何和所有帮助！

到目前为止，这就是我所拥有的所有代码，因为我不确定如何通过特定字符更改颜色：

.normaltag { color: red; }

【问题讨论】：

任何代码示例都可以帮助您获得响应。

标签： css colors

【解决方案1】：

您也可以使用一个元素和:before 和: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>

【讨论】：

【解决方案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>

【讨论】：