今天在研究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；同时生效不能说明其权重大小，他们是不同的属性值，之所以显示为max-width是因为max-width是在width超出限制的宽度的时候生效的，所以显示为max-width。
有不一样看法的大神还请给我留言，纠正我的错误。
1049
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
