当你将一个样式添加到元素上却发现不起作用时,那就是遇到优先级问题了。那么应该如何处理 CSS 优先级问题呢,下面我总结了一些解决 CSS 优先级问题的常用法则。
样式距离
我们可以通过使用外部样式、内部样式、内联样式等方法给元素添加指定的样式,此时的优先级是:
外部样式 < 内部样式 < 内联样式
这个应该比较容易理解,也就是说离元素距离越近的样式优先级越大。如:
此时显示的优先级是 red > blue > green。所以 my color 显示为红色。
特殊的计算方法
假设有下面这段代码:
我们面对下面的 css,如何判断优先级呢?
这里介绍一种特殊的计算方法:
元素, 伪元素: 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)
所以现在我们再来看上面的例子:
由于优先级上 (0,1,0,1) > (0,0,1,2),所以我们知道最后显示的颜色为红色。
继承
继承是个比较好理解的概念,即子元素会继承父元素的样式。例如:
上例中的 span 会继承父元素 div 的样式。但不是所有的属性都会默认使用继承的方式,比如 margin 和 padding 属性。例如:
此时,元素 p 并不会继承父元素 div 的 margin 和 padding 样式,除非你这么做:
总结
1.首先找到所有作用在元素上的样式。(不要忽略来自继承的样式)
2.计算样式的作用距离,距离越近,优先级越大。
3.使用特殊的计算方法来判断同距离内的样式。
4.如果计算后的结果相同,那么后声明的样式覆盖先前声明的样式。
5.如果某个样式中设置 !important,则无论它的优先级如何,都以该样式为准。(除非迫不得已,强烈不建议使用这个方法,因为这无疑是不符合 css 思想的用法)
最近在做一个手机站,要求点击分享可以直接打开微信分享出去。而不是jiathis,sh...
在这场没有硝烟的战“疫”中,广大医务工作者奔赴抗疫斗争第一线,成为“最美逆...
近日,世界上最大的连锁零售企业沃尔玛被曝购买了 域名 FightHunger.com。 Fight...
DreamweaverCS3默认的新建文档的编码是UTF-8,这对于有些只做GB2312编码网站的设...
进入阿里巴巴矢量图标库 阿里巴巴矢量图标库 选择喜欢的图标的,点击添加到库 选...
(P4) Web标准由一系列标准组合而成,其核心理念是将网页的结构、样式和行为分离...
核心代码: 复制代码 代码如下: $(function(){ var can = $("#can").get(0); var ...
当我们的app开发完成之后,无可避免的以后会进行产品升级,那么我们希望在客户的...
近年来,随着信息化建设及应用的深入,数据的价值在跨领域跨行业的交互共享中体...
深度学习技术方兴未艾,新一轮AI的开发与应用,如火如荼。在全球范围内,开源项...