当你将一个样式添加到元素上却发现不起作用时,那就是遇到优先级问题了。那么应该如何处理 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)
新闻热点
疑难解答