原始代码
* {
margin: 0;
padding: 0;
background-color: #f5f5f5;
}
.product {
width: 300px;
height: 415px;
background-color: #fff;
/* 让块元素的盒子水平居中对齐 */
margin: 0 10px;
float: left;
/* display: inline-block; */
/* 给盒子加阴影 */
box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .1);
}
<div class="product">
<img src="images/xiaomi.jpg" alt="">
<p class="review">
快递牛,整体还不错,就是产品质量不是特别好,喜欢,下次还来买!
</p>
<div class="appraise">
来自于用户1823757的评价
</div>
<div class="info">
<h4>
<a href="#">
Redmi AirDots真无线蓝牙...
</a>
</h4>
<em>| </em>
<span>
99.9元
</span>
</div>
</div>
效果
可见看到下面的三个模块都没有继承父级product的背景颜色白色
而是直接调用了*里面的背景颜色
因为继承的权重是最低的 低于* 所以导致这种情况
解决办法:将背景颜色在css里面用body去写
body 元素选择器的权重是比 * 高的
修改后代码:
* {
margin: 0;
padding: 0;
}
body {
background-color: #f5f5f5;
}
.product {
width: 300px;
height: 415px;
background-color: #fff;
/* 让块元素的盒子水平居中对齐 */
margin: 0 10px;
float: left;
/* display: inline-block; */
/* 给盒子加阴影 */
box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .1);
}
效果: