css - 如何覆盖 CSS3 中的伪类

Question

我定义了伪类 red:before 和 red:after，它们包含一个边框颜色的十六进制代码。现在我需要使用另一个名为 blue 的 CSS 类将颜色从红色切换为蓝色。

这是我的 HTML:

<div class="red blue">Text</div>

这是我的 CSS:

.red:before, .red:after {
border-color: red;
}

如何设置 .blue 的 CSS 以使边框颜色变为蓝色？

Answer 1

在 css 中覆盖某些东西的正确方法通常你所要做的就是再次重写它

.red:before, .red:after {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid red /*we will override this*/
}

<div class="red blue">Text</div>

现在我们覆盖它

.red:before, .red:after {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid red /*we will override this*/
}
.blue:before, .blue:after {
  border: 2px solid blue
}

<div class="red blue">Text</div>

但是你可以这样清理它

.red:before, .red:after {
  content: '';
  width: 16px;
  height: 16px;
}
.red:before, .red:after {
  border: 2px solid red 
}
.blue:before, .blue:after {
  border: 2px solid blue
}

<div class="red blue">Text</div>