为什么 .danger h1 { color: #ff0000; } 这样会覆盖全局的 h1 样式呢?

2017-12-08 14:05:36 +08:00
 miniyao

我在 styles.css 文件里定义了这样一行:

.danger h1 { color: #ff0000; }

页面 HTML 就是这样:

<div class="danger">
    <h1>危险操作</h1>
</div>

结果搞得其他好几个地方的<h1>Title</h1>颜色都变红颜色 #ff0000 了,但也有的地方又没有变。大多的结构都类似是这样的写法:

<div class="xxx">
    <h1>Title</h1>
</div>

(系统全局默认引用了 百度 cdn 的 bootstrap css )这个 css 样式的覆盖顺序由什么问题吗?

1237 次点击
所在节点    问与答
5 条回复
phy25
2017-12-08 14:15:52 +08:00
.danger > h1 ?可以看看是不是 body 之类的位置带了个 .danger ……
miniyao
2017-12-08 14:28:42 +08:00
@phy25 加了箭头 > 也没用,避免冲突,我改成 .danger-abc h1{...} 也还是会覆盖别的 h1,好奇怪。明明那个 h1 是写在 class="xxx"里的。
wleven
2017-12-08 14:29:56 +08:00
F12
miniyao
2017-12-08 14:37:37 +08:00
@wleven 我说的就是 F12 里看的结果。<div class="xxx">h1Title</h1></div>里如果不指定 h1 样式,就显示 bootcss 的 h1 被 .danger h1 覆盖了。
xmcp
2017-12-08 19:09:42 +08:00
给个 demo 啊,这样尬聊怎么解决问题……
放到 jsbin.com 什么的都可以

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/413094

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX