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>

Answer 2

更具体的规则应该有所帮助：

div.blue:before, div.blue:after {
  border-color: blue;
}

参考：MDN - Specificity

如何在CSS3中覆盖伪类

2 个答案: