CSS样式优先级与继承冲突解析-CSDN博客

本文链接：https://blog.csdn.net/whynottrythis/article/details/41974609

------------------------------------------------------------------------
           |      最次要          |        <---->        |    最重要
------------------------------------------------------------------------
样式生成于： |  浏览器的默认样式表    |  用户自定义的样式表    |  页面开发人员样式表
------------------------------------------------------------------------
样式生成于： |  外部样式表           |  内部样式表           |  内联样式表
------------------------------------------------------------------------
样式生成于： |  元素选择器           |  类选择器             |  ID选择器
------------------------------------------------------------------------

当样式冲突时, CSS中允许使用!important指明样式具有更高的优先级

p{color:blue; !important}

1. 影响页面中元素的位置的属性，或者像margin，background color，border这些属性是不继承的。
2. 浏览器自定义的一些元素的样式，如link为蓝色的，headline的字体等等。
3. 当css样式冲突时，继承的不会被采用。
 
第三条其实指明了css样式应用的另一个规律:The Directly Applied Style Wins。当样式存在冲突时，直接运用的样式会被采用。就继承冲突而言还存在另一条规律：Nearest Ancestor Wins。
 
这里再讨论下one tag， many styles的情况，比如：对于一个元素<p>我们既设置了id selector style又设置了class selector style，这种情况下，如style不存在冲突，所设置的样式会组合起来运用到元素上。如存在冲突，css提供了一个公式去模拟优先级:
 A tag selector is worth 1 point .
A class selector is worth 10 points .
An ID selector is worth 100 points .
An inline style is worth 1000 points .