今天在研究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。
有不一样看法的大神还请给我留言,纠正我的错误。