当多个 CSS 样式应用到同一个元素时, 这些样式之间可能存在对同一个属性的不同格式设置, 当发生冲突时, 浏览器通过遵循以下原则来解决 CSS 冲突.
优先级原则
优先级原则: 指的是优先级最高的样式有效, 其中行内样式 > 内嵌式样式 | 链接外部样式, 即行内样式的优先级最高, 而内嵌式样式和链接外部样式的优先级由它们出现的位置决定, 谁出现在后面谁的优先级就高. 在同类型的样式中, 选择器之间也存在不同的优先级, 选择器的优先级规定为: ID 选择器 > class 选择器 | 伪类选择器 | 属性选择器 > 元素选择器 | 伪元素选择器 > 通配符选择器 | 子元素选择器 | 相邻兄弟选择器, 即 ID 选择器的优先级最高.
最近原则
最近原则: 主要是针对继承样式, 越靠近格式化的元素的父类样式, 优先级越高. 如:<div><p>...</p></div>, 给 < p > 标签设置样式, 它的优先级就高于 < div > 标签样式.
同一属性的样式定义, 后面定义的样式会覆盖前面定义的样式.
此外, 把! important 加在样式的后面, 可以提升样式的优先级为最高级 (高过内联样式)
- <div class="container">
- <div class="abc">
- </div>
- </div>
来源: http://www.css88.com/qa/css3/16004.html