Question

我正在建立一个网站并拥有一个用户论坛。我想基于排名系统为不同的用户分配标签，我已经完成了，但我需要一种方法（仅在CSS中）为一个类分配多种不同的颜色。例如，标签采用以下格式：Quickcal::Application.routes.draw do # place routes end，我希望方括号为一种颜色，而文本为另一种颜色。任何和所有的帮助表示赞赏！

到目前为止，这是我在代码方面的全部内容，因为我不确定如何通过特定字符更改颜色：

[TAGTEXT]

Answer 1

只需将该文字包装在某个范围内

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您也可以使用一个元素以及:before和:after伪元素执行此操作。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

同一个CSS类中的几种颜色？

2 个答案: