首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何在CSS3中覆盖伪类

如何在CSS3中覆盖伪类
EN

Stack Overflow用户
提问于 2015-02-21 11:03:32
回答 2查看 2.5K关注 0票数 5

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

以下是我的Html:

代码语言:javascript
代码运行次数:0
运行
复制
<div class="red blue">Text</div>

这是我的CSS:

代码语言:javascript
代码运行次数:0
运行
复制
.red:before, .red:after {
border-color: red;
}

如何为.blue设置CSS以使边框变成蓝色?

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-02-21 11:06:28

更具体的规则应有助于:

代码语言:javascript
代码运行次数:0
运行
复制
div.blue:before, div.blue:after {
  border-color: blue;
}

参考资料:MDN -特异性

票数 2
EN

Stack Overflow用户

发布于 2015-02-21 11:30:08

一般情况下,重写css内容的正确方法就是重新重写它。

代码语言:javascript
代码运行次数:0
运行
复制
.red:before, .red:after {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid red /*we will override this*/
}
代码语言:javascript
代码运行次数:0
运行
复制
<div class="red blue">Text</div>

现在我们推翻它

代码语言:javascript
代码运行次数:0
运行
复制
.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
}
代码语言:javascript
代码运行次数:0
运行
复制
<div class="red blue">Text</div>

但你可以像这样清理一下

代码语言:javascript
代码运行次数:0
运行
复制
.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
}
代码语言:javascript
代码运行次数:0
运行
复制
<div class="red blue">Text</div>

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/28645013

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档