同样的 CSS 选择器应如何覆盖颜色?

Sconosciuti
  • 8

描述

用了一个开源聊天系统,支持加载自定义 CSS 作为主题,于是想作以下修改

//默认css文件 style.css

#sidebar button,
#sidebar .chan,
#sidebar .sign-out {
border: 1px solid transparent;
border-radius: 2px;
color: #99a2b4; //例如改成#cecece
cursor: pointer;
font-size: 14px;
} 
//自定义 css 主题

#sidebar button,
#sidebar .chan,
#sidebar .sign-out {
    color: #cecece;
    }

加载完了之后发现页面还是没有变化,打开 F12 查看,发现自定义的 color 属性没有生效,如下图

58477d2789723.png

问题

为什么会没有生效呢?该如何解决?

回复
阅读 4.5k
6 个回答

最简单的在color:#e4e4e4 !important

建议先了解下 CSS 的优先级,当然你也可以直接使用!important(虽然不推荐)

CSS是就近优先,你看看加载顺序把。

首先!important, 没什么不好...
优先级以!important 为主, 如果有多个, 则按照!important 的选择器的优先级来取.

其次优先级,
id class tagname为三个等级, 可以看做为一个三位数字来比较大小获得优先顺序, 例:

<div id="test" class="test test1"></div>
#test       --> 100
.test.test1 --> 020
.test       --> 010
div         --> 001
div#test    --> 101
...

如果同级 比如

.test{background:#ccc !important} 
.test1{background:white !important}

则后加载优先级高.

首先从控制台看,你的文件引用顺序没错。如何控制就是如图

clipboard.png
这种情况,你检查一下上下文。感觉被你注释了。o(╯□╰)o

实在不行。就采用他们说的 !important

1.你可以让green.css文件在style.css之后加载
2.color:#e4e4e4 !important

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏