响应式设计规范挑战

 

响应式设计-内容定义的断点挑战任务2/3。

 

任务是：在相同的媒体查询中添加适当的CSS，这将迫使“一见钟情”插图消失。

 

我试过了：

 

grid_2 omega {display：none;}

但我想不是那样。

 

是（grid_2和omega）之间的空隙在咬我，还是我在这里做错了什么。

 

答：看起来代码正确性测试中可能存在错误。

 

.grid_2.omega img {display: none; } 似乎也选择鳄梨图像

 

但是#intro img { display: none; }应该起作用，因为它只是选择了id为div的唯一img intro。

 

看看这个codepen，看看我的意思。另外，您还需要将浏览器窗口的大小明显调整为700px，因为它使用的是媒体查询。

 

答：这不是一个很好执行的代码挑战。像大多数解决方案一样，有很多方法可以解决它，我尝试了很多，但都没有通过。@darrin发布的我尝试通过的方法在技术上如果严格遵守说明是不正确的，因为该说明不涉及删除所有图像，因为通过的解决方案是：

 

.grid_2 img {显示：无；}

但更正确的选择不会通过，实际上会强制第一个练习不通过：

 

#intro> .grid_2 img {显示：无；}