这是什么情况啊

这是什么情况啊

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<!-- <meta name=""> -->

<style>

#box{

width:80%;

margin:0 auto;

background: #ccc;

text-align:center;

}

#box>img{

display: inline-block;

padding:1.5%;

width:21%;

height:200px;

}

/*此处写代码*/

img{

width: 21%;

}

@media(max-width:959px){

img{

width: 28%;

}


}

@media(max-width:779px){

img{

width: 42%;

}


}

@media(max-width:440px){

img{

width: 85%;

}


}

</style>

</head>

<body>

<div id="box">

<img src="http://img1.sycdn.imooc.com//climg/5a45e49100014e5010601059.jpg" alt="">

<img src="http://img1.sycdn.imooc.com//climg/5a45e53b00012e6d09940789.jpg" alt="">

<img src="http://img1.sycdn.imooc.com//climg/5a45e53c0001d04e09940732.jpg" alt="">

<img src="http://img1.sycdn.imooc.com//climg/5a45e49100014e5010601059.jpg" alt="">

<img src="http://img1.sycdn.imooc.com//climg/5a45e53b00012e6d09940789.jpg" alt="">

<img src="http://img1.sycdn.imooc.com//climg/5a45e53c0001d04e09940732.jpg" alt="">

</div>

</body>

</html>



正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕星星 2020-07-31 17:18:48

同学你好,是选择器权值的问题。可以从控制台中看到通过媒体查询设置了样式,但是没有生效,这是因为#box>img的权值大于img权值,所以不能生效

http://img1.sycdn.imooc.com//climg/5f23e18a09b0a44b03570249.jpg

媒体查询中img修改为#box>img就好了

http://img1.sycdn.imooc.com//climg/5f23e1f0095fbec503690413.jpg

自己再测试理解下,祝学习愉快!

提问者 慕标5156652 2020-07-31 15:34:13

把img换成#box>img这个就没有问题。这个是什么原因啊?



问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
3.WebAPP开发与小程序
  • 参与学习           人
  • 提交作业       622    份
  • 解答问题       6815    个

微信带火了小程序,也让前端工程师有了更多的展现机会,本阶段带你从移动基础知识的学习到webAPP开发,及小程序开发,让你PC端与移动端两端通吃。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师