Css选择器权重问题

Css选择器权重问题

我们都知道，在利用HTML+CSS开发网站的时候，CSS的选择器有很多种，例如：行间样式，ID选择器，class类选择器，标签选择器等等，但是当一个标签包含多种选择器时，有作用的究竟是哪个选择器呢？

例如以下代码：

如果这样的话代码中的DIV标签究竟应该展示成什么样？
答案就是400px乘400px的红色正方形，可能很多人还不清楚为什么会是这样，下面给大家列出所有选择器的权重：

选择器              权重
!important        Infinity
行间样式          1000
id                       100
class/属性/伪类  10
标签/伪元素         1
通配符                 0

从这个CSS权重表可以看出important的权重最大，是Infinity，表示无穷大，而通配符选择器最小，是0，上面的例子中有important、标签、id、class、行间样式，所以根据这个CSS权重表就可以看出应该显示的是哪个css选择器的属性了。