CSS优先问题的详细解决方案

所谓CSS优先权，即CSS样式在浏览器中解析的顺序，因为样式有优先权，有一条规则来确定优先级，而规则是焦点。
当你将一个样式添加到一个元素并发现它不起作用时，这是一个优先问题。然后如何处理CSS优先问题，我总结了一些常见的规则来解决CSS优先问题。

风格的距离

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

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

颜色：蓝色；

外部样式（颜色：绿色）
我的颜色内联样式
这次的重点是红色，蓝色，绿色，所以我的颜色是红色的。

特殊的计算方法

假设有下面一部分代码：
复制代码代码如下所示：

DIV p.classselector {颜色：蓝}
# idselector p {颜色：红}
我的颜色
我们下面的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）
现在让我们来看看上面的例子：
复制代码代码如下所示：
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），我们知道最终显示的颜色是红的。

继承

继承是一个更好的理解，那就是，子元素继承父元素的样式。例如：
复制代码代码如下所示：

我的颜色
在本例中，跨度将继承div样式的父元素，但并非所有属性都默认继承，如边距和填充属性：
复制代码代码如下所示：

我的颜色
此时，元素p不继承父元素div的边距和填充样式，除非您这样做：
复制代码代码如下所示：

我的颜色
总结

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

Stylesheets allow style information to be specified in a variety of ways.The style can be specified in a single HTML element, in the header element of the HTML page, or in an external CSS file.You can even refer to multiple external stylesheets within the same HTML document.Which style will be used when the same HTML element is defined by more than one style

一般来说，所有的款式都堆放在一个新的基于以下规则的虚拟的样式表，在4号有最高的优先级。

浏览器默认设置
公牛；外部样式表
公牛；内部样式表（内标）
内嵌样式（在HTML元素内）

因此，内联样式（在HTML元素内）具有最高的优先级，这意味着它将优先考虑以下样式声明：标签中的样式声明，在外部样式表的样式声明，或声明的方式（默认值）在浏览器中。这只是一个大的优先。在上一篇文章中，我们讨论了CSS的许多选择器。那么相同样式CSS的选择器的优先级是什么呢

我们认为CSS是一个三位数字，通过比较数字的大小和优先级的大小可以相当简单。

百分位数是选择器上id的个和；
十个数字是其他属性选择器和选择器上使用的伪类的总和；
数字的数字是计算元素（如表，p，div，*等）和伪元素（如一线，等等）；
公牛；如果两选择器对应相同的数字，即相同的优先级，在样式表中的一个。
公牛；标有重要的规则具有最高优先级，例如，颜色：黑色！重要的；font-family: sans-serif }，前景颜色标记的重要，和前景颜色具有高优先级。但这种说法是容易引起混乱，通常不使用。
选择的价值

颜色：蓝色；} 1
颜色：紫色；} 1 + 1＝2
苹果{颜色：红色，} 10
p.bright {颜色：黄色1 + 10 = 11；}
p.bright em.dark {颜色：棕色；} 1 + 10 + 1 + 10 = 22
# id316 { } 100颜色：黄色

在一般情况下，我们也可以通过浏览器插件来查看哪个CSS作品，如萤火虫（Firefox）、Developer Tools（IE8），等等。我们看到，CSS取决于在同一时间的位置，和通常的CSS的优先级越高。但对于IE浏览器，具有相同值的动态CSS取决于订单之前加入，但不加入前后。

原则1 -继承不如指定。
原则二# ID >。类>标签选择器。
原则三-更加具体和强大。
原则四# ID > # ID标签；标签。班班>。
原则五——原则一、原则二、原则三、原则四。