今天在研究css的选择器权重问题时，发现了一个让我很困惑的问题，不废话，直接上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试权重</title>
<style>
.father{
max-width:256px;
width:300px !important;
height:100px;
background-color: red;
}
.child{
width:300px;
height:100%;
background-color: green;
}
</style>
</head>
<body>
<div class='father'>
<div class='child'></div>
</div>
</body>
</html>上面代码的结果是这样的,max-width:256px;和width:300px !important;都生效了，但是显示的是max-width的值，这是为什么？
这时我想到了这会不会和属性值的大小有关，于是我把width:200px ！important; 发现结果如我所料一般，浏览器显示结果如图
此时的father容器的宽度为200px，如果就此认为max-width和width:值 ！important；的权重是一样的，就太草率了，还有style内嵌样式呢，于是我在father的容器中加入了style样式，如图
这是显示结果仍然是显示数值较小的属性值
这是否说明max-width与width：值 ！important；的权重是一样或者说两者不分大小的呢，只是浏览器给予的解释是取较小的值。
有不一样看法的大神还请给我留言，纠正我的错误。