当你将一个样式添加到一个元素并发现它不起作用时，这是一个优先问题。然后如何处理CSS优先问题，我总结了一些常见的规则来解决CSS优先问题。

风格的距离
我们可以使用外部样式、内部样式、内联样式等将元素添加到元素中。当务之急是在这个时候：

外部样式<内部样式>内联样式
这应该更容易理解，也就是说，与元素的距离越近，样式的优先级就越大：

CSS代码将内容复制到剪贴板。



颜色：蓝色；

外部样式（颜色：绿色）
我的颜色内联样式




这次的重点是红色，蓝色，绿色，所以我的颜色是红色的。

特殊的计算方法
假设有下面一部分代码：

CSS代码将内容复制到剪贴板。



DIV p.classselector {颜色：蓝}
# idselector p {颜色：红}


我的颜色





我们下面的CSS，如何判断优先级

CSS代码将内容复制到剪贴板。



DIV p.classselector {颜色：蓝}
# idselector p {颜色：红}





这里介绍了一种特殊的计算方法。

元素，伪元素：1—（0,0,0,1）；
类，伪类，属性：1—（0,0,1,0）；
编号：1—（0,1,0,0）；
内联样式：1—（1,0,0,0）；
这里的属性是：


结果如下：


优先权从上到下都在增加。至于如何计算，同样的例子说明：

P：1元（0,0,0,1）&ndash；
div元素：1 -（0,0,0,1）；
# idselector：1 ID ndash；（0,1,0,0）
DIV # idselector：1要素、1号ndash；（0,1,0,1）
DIV # idselector P：2要素、1 idndash；（0,1,0,2）
DIV # idselector p.classselector：2元，1类，1号ndash；（0,1,1,2）
现在让我们来看看上面的例子：

CSS代码将内容复制到剪贴板。


DIV p.classselector {颜色：蓝} -（0,0,0,1）+（0,0,0,1）+（0,0,1,0）=（0,0,1,2）
# idselector p {颜色：红} -（0,1,0,0）+（0,0,0,1）=（0,1,0,1）




由于优先（0,1,0,1）>（0,0,1,2），我们知道最终显示的颜色是红的。

继承
继承是一个更好的理解，那就是，子元素继承父元素的样式。例如：

CSS代码将内容复制到剪贴板。



我的颜色





在本例中，跨度将继承div样式的父元素，但并非所有属性都默认继承，如边距和填充属性：

CSS代码将内容复制到剪贴板。



我的颜色





此时，元素p不继承父元素div的边距和填充样式，除非您这样做：

CSS代码将内容复制到剪贴板。



我的颜色





总结
1。首先查找元素上所有函数的样式（不要忽略继承的样式）
2。距离越近，计算风格的优先级就越大。
三.用一种特殊的计算方法确定同一距离的风格。
4。如果计算结果相同，则以后的声明样式将覆盖前面声明的样式。
5。如果设置为样式！重要的是，不管它的优先顺序是什么，它都是基于样式。（除非它是强迫的，强烈建议不要使用这种方法，因为这无疑与CSS思想的使用不一致）。