HTML/CSS 一个 class 的意外写法。

ane · 2013年11月20日 · 最后由 frank_128 回复于 2013年11月21日 · 3003 次阅读

首先,我是不太懂 css 的。用 bootstrap 的时候, 有两个 class:

:用于支持响应式图片

:这个图片的效果我喜欢,

于是我就写成了:

发现图片具有了 class="img-thumbnail"的效果。

但我不是太明白,这样的写法,是不是相当于合并了两个 class?那冲突的地方怎么处理?

css 有权重,越精确权重越大,两个 class 如果权重一样,以在 css 文件中靠后位置的优先。

#1 楼 @Rei 我试过 class="img-thumbnail img-responsive " >和 class=" img-responsive img-thumbnail img-responsive " >的效果都是一样的,也就是说 img-thumbnail 的权重大,而 img-responsive 压根没起到作用,是这个意思吧?

额,你还需要看看这两个 class 的交集和差集吧,应该是两个 class 的交集的地方,权重决定采用那个,而差集的地方,相当于并集,就是样式的叠加。最好的办法应该是看看源代码中这个两个 class 的实现。

#2 楼 @u1378130755 如果精确度一样的话 你得看这两个 class 对应的源码在实际文件的行数 越靠后的生效

DevTools 看 Computed 样式可以看到具体是什么起的作用……

#5 楼 @Kabie 哇,学到了,

CSS 的权重计算规则挺变态的,可自行搜索 CSS Specificity

搞 RoR 的人到底是对前端有多么不了解?这是所有 CSS 入门里的第一课好么?

需要 登录 后方可回复, 如果你还没有账号请 注册新账号