关于CSS选择器优先级的一点疑问

页面中外链了一个CSS文件,页面顶部又有自己的<style>标签,同一个选择器,为什么是外链的覆盖了<style>中的样式( #SelectCondition 的 height 属性)?百思不得其解,望赐教。
图片描述

图片描述

阅读 2.6k
3 个回答

之前遇到过一个类似的问题,
后来发现是外链的样式放在内联样式之后, 然后导致内联 style 标签里的样式被覆盖.
这时我才知道, 内联style样式的优先级高于外链样式的说法并不准确,
同一选择器, 最后解析的, 会把之前的样式覆盖, 不管是内联还是外链.
只是通常我们会把外联样式放最前面, 所以就产生了这样的错觉.

clipboard.png

看, 内联的样式被外链样式覆盖了.

clipboard.png

但是看你贴出来的代码, style 标签是在 link 之后...
会不会是 style 后面还有外链样式表.

刚才,没看到那个逗号,以为是后代选择器。
想了半天也没想到啥原因,题主得到答案告诉一声。

因为选择器的优先级

#SelectCondition .SelectCondition
的优先级大于
#SelectCondition

如果用同一种选择器比如

clipboard.png

clipboard.png

clipboard.png

没错、显示是blue

如果不同、在比如

clipboard.png

clipboard.png

clipboard.png

就是red了、

内嵌style的优先级大于外链的、

但是选择器优先级考虑在前

PS、关于权重的相关知识、这里有一篇博客

http://www.cnblogs.com/52css/...

题主所写的是文中的 内部样式表 和 外联样式表

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