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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2548 天前的主题，其中的信息可能已经有所发展或是发生改变。

我在 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 样式的覆盖顺序由什么问题吗？

5 条回复 • 2017-12-08 19:09:42 +08:00

phy25

2017-12-08 14:15:52 +08:00 via Android

.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 什么的都可以