Css选择器权重问题
我们都知道，在利用HTML+CSS开发网站的时候，CSS的选择器有很多种，例如：行间样式，ID选择器，class类选择器，标签选择器等等，但是当一个标签包含多种选择器时，有作用的究竟是哪个选择器呢？
例如以下代码：
<html>
<head>
<title>CSS权重</title>
<style>
div{
width:100px;
height:100px;
background-color:red!important;
}
#div1{
width:200px;
height:200px;
background-color:green;
}
.div2{
width:300px;
height:300px;
background-color:yello;
}
</style>
</head>
<body>
<div id="div1" class="div2" style="height:400px;width:400px;background-color:black;"></div>
</body>
</html>
如果这样的话代码中的DIV标签究竟应该展示成什么样？
答案就是400px乘400px的红色正方形，可能很多人还不清楚为什么会是这样，下面给大家列出所有选择器的权重：
选择器 权重
!important Infinity
行间样式 1000
id 100
class/属性/伪类 10
标签/伪元素 1
通配符 0
从这个CSS权重表可以看出important的权重最大，是Infinity，表示无穷大，而通配符选择器最小，是0，上面的例子中有important、标签、id、class、行间样式，所以根据这个CSS权重表就可以看出应该显示的是哪个css选择器的属性了。