今天小编跟大家讲解下有关CSS 优先级问题详解 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS 优先级问题详解 的相关资料，希望小伙伴们看了有所帮助。
当你将一个样式添加到元素上却发现不起作用时 那就是遇到优先级问题了。那么应该如何处理 CSS 优先级问题呢 下面我总结了一些解决 CSS 优先级问题的常用法则。
样式距离
我们可以通过使用外部样式、内部样式、内联样式等方法给元素添加指定的样式 此时的优先级是:
外部样式 < 内部样式 < 内联样式这个应该比较容易理解 也就是说离元素距离越近的样式优先级越大。如：
复制代码代码如下:<style type="text/css"> div{color:blue;} //内部样式</style><link rel="stylesheet"type="text/css"href="https://www.aidi.net.cn//css/mystyle.css"/> //外部样式(color:green)<div style="color:red">my color</div>//内联样式
此时显示的优先级是 red > blue > green。所以 my color 显示为红色。
特殊的计算方法
假设有下面这段代码：
复制代码代码如下:<style type="text/css"> div p.classSelector {color: blue} #idselector p {color: red}</style><div id="idSelector"> <p class="classSelector">my color</p></div>
我们面对下面的 css 如何判断优先级呢
复制代码代码如下:<style type="text/css"> div p.classSelector {color: blue} #idselector p {color: red}</style>
这里介绍一种特殊的计算方法：
元素, 伪元素: 1 – (0,0,0,1)类, 伪类, 属性: 1 – (0,0,1,0)ID: 1 – (0,1,0,0)内联样式: 1 – (1,0,0,0)这里的属性指的是：
效果如下：
优先级从上往下依次增加 至于如何计算 同样举例说明：
p: 1个元素– (0,0,0,1)div: 1个元素 – (0,0,0,1)#idSelector: 1个ID – (0,1,0,0)div#idSelector: 1个元素, 1个ID – (0,1,0,1)div#idSelector p: 2个元素, 1个ID– (0,1,0,2)div#idSelector p.classSelector: 2个元素, 1个类, 1个ID – (0,1,1,2)所以现在我们再来看上面的例子：
复制代码代码如下: div p.classSelector {color: blue} - (0,0,0,1) + (0,0,0,1) + (0,0,1,0) = (0,0,1,2) #idselector p {color: red} - (0,1,0,0) + (0,0,0,1) = (0,1,0,1)
由于优先级上 (0,1,0,1) > (0,0,1,2) 所以我们知道最后显示的颜色为红色。
继承
继承是个比较好理解的概念 即子元素会继承父元素的样式。例如：
复制代码代码如下:<div style="color:red"> <p>my color</p></div>
上例中的 span 会继承父元素 div 的样式。但不是所有的属性都会默认使用继承的方式 比如 margin 和 padding 属性。例如：
复制代码代码如下:<div style="margin:10px;padding:10px"> <p>my color</p></div>
此时 元素 p 并不会继承父元素 div 的 margin 和 padding 样式 除非你这么做：
复制代码代码如下:<div style="margin:10px;padding:10px"> <p style="margin:inherit;padding:inherit">my color</p></div>
总结
1.首先找到所有作用在元素上的样式。（不要忽略来自继承的样式）2.计算样式的作用距离 距离越近 优先级越大。3.使用特殊的计算方法来判断同距离内的样式。4.如果计算后的结果相同 那么后声明的样式覆盖先前声明的样式。5.如果某个样式中设置 !important 则无论它的优先级如何 都以该样式为准。（除非迫不得已 强烈不建议使用这个方法 因为这无疑是不符合 css 思想的用法）
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中 在 HTML 页的头元素中 或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。当同一个 HTML 元素被不止一个样式定义时 会使用哪个样式呢
一般而言 所有的样式会根据下面的规则层叠于一个新的虚拟样式表中 其中数字 4 拥有最高的优先权。
•浏览器缺省设置•外部样式表•内部样式表（位于 <head> 标签内部）•内联样式（在 HTML 元素内部） 因此 内联样式（在 HTML 元素内部）拥有最高的优先权 这意味着它将优先于以下的样式声明：<head> 标签中的样式声明 外部样式表中的样式声明 或者浏览器中的样式声明（缺省值）。这只是一个大方面的优先级 在前面文章中我们讲过CSS有很多选择器 那么对于同种样式的CSS 各个选择器的优先级又是如何呢
我们将某一个CSS看成一个三位数 通过比较数字的大小来获取优先级的高低 那么就会相当简单。在这里可以通过下面的规则来定义各个选择器对应的数字。
•百位数是该选择器上的id的数量的总和； •十位数是用在该选择器上的其它属性选择器和伪类的总和。这里包括class (.example) 和属性选择器(比如 li[id=red])； •个位数是计算元素(就像table、p、div、*等等)和伪元素(就像:first-line等)； •如果两个选择器对应的数字相等 也就是具有同样的优先级 在样式表中后面的那个起作用。•标有"!important"的规则具有最高优先级 例如H1{color:black !importan; font-family:sans-serif} 前景色被标为important 这个前景色具有很高的优先级。但是这种声明容易引起混乱 因此通常使用得较少。选择器 数值 h1 {color:blue;} 1 p em {color:purple;} 1 + 1 = 2 .apple {color:red;} 10 p.bright {color:yellow;} 1 + 10 = 11 p.bright em.dark {color:brown;} 1 + 10 + 1 + 10 = 22 #id316 {color:yellow} 100
一般我们还可以通过浏览器的插件来查看 到底哪个CSS起作用 比如Firebug(Firefox)、Developer Tools(IE8)等。上面我们介绍到当优先级相同时 哪个CSS起作用取决于所处的位置 通常后面的CSS优先级要高。但是对于IE浏览器 具有相同数值的动态CSS取决于添加的顺序前后 而不是添加的位置前后；后添加的优先级要高。
原则一 - 继承不如指定。原则二 - #ID > .class > 标签选择符。 原则三 - 越具体越强大。原则四 - 标签#id >#id ; 标签.class > .class。原则五 - 原则一 > 原则二 > 原则三 > 原则四。
来源：爱蒂网
