首页 >web前端 >css教程 >CSS编写中的属性优先级问题解决方法

CSS编写中的属性优先级问题解决方法

高洛峰
高洛峰原创
2017-03-13 17:40:491379浏览

这篇文章主要介绍了CSS编写中的属性优先级问题,重点讲解了元素之间的层级计算以及继承关系,需要的朋友可以参考下

当你将一个样式添加到元素上却发现不起作用时,那就是遇到优先级问题了。那么应该如何处理 CSS 优先级问题呢,下面我总结了一些解决 CSS 优先级问题的常用法则。

样式距离
我们可以通过使用外部样式、内部样式、内联样式等方法给元素添加指定的样式,此时的优先级是:

外部样式 cd2f4f20e5e1163d3ad6cdf3d68e3609 blue > green。所以 my color 显示为红色。

特殊的计算方法
假设有下面这段代码:

<style type="text/css">   
  p p.classSelector {color: blue}   
  #idselector p {color: red}   
</style>   
<p id="idSelector">   
  <p class="classSelector">my color</p>   
</p>


我们面对下面的 css,如何判断优先级呢?

<style type="text/css">   
  p 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)
这里的属性指的是:
CSS编写中的属性优先级问题解决方法

效果如下:
CSS编写中的属性优先级问题解决方法

优先级从上往下依次增加,至于如何计算,同样举例说明:

p: 1个元素– (0,0,0,1)
p: 1个元素 – (0,0,0,1)
#idSelector: 1个ID – (0,1,0,0)
p#idSelector: 1个元素, 1个ID – (0,1,0,1)
p#idSelector p: 2个元素, 1个ID– (0,1,0,2)
p#idSelector p.classSelector: 2个元素, 1个类, 1个ID – (0,1,1,2)
所以现在我们再来看上面的例子:

p 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),所以我们知道最后显示的颜色为红色。

继承
继承是个比较好理解的概念,即子元素会继承父元素的样式。例如:

<p style="color:red">   
  <p>my color</p>   
</p>


上例中的 span 会继承父元素 p 的样式。但不是所有的属性都会默认使用继承的方式,比如 marginpadding 属性。例如:

<p style="margin:10px;padding:10px">   
  <p>my color</p>   
</p>


此时,元素 p 并不会继承父元素 p 的 margin 和 padding 样式,除非你这么做:

<p style="margin:10px;padding:10px">   
  <p style="margin:inherit;padding:inherit">my color</p>   
</p>


总结
1.首先找到所有作用在元素上的样式。(不要忽略来自继承的样式)
2.计算样式的作用距离,距离越近,优先级越大。
3.使用特殊的计算方法来判断同距离内的样式。
4.如果计算后的结果相同,那么后声明的样式覆盖先前声明的样式。
5.如果某个样式中设置 !important,则无论它的优先级如何,都以该样式为准。(除非迫不得已,强烈不建议使用这个方法,因为这无疑是不符合 css 思想的用法)

以上是CSS编写中的属性优先级问题解决方法的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn