<body> <a href="#" >Hearts</a> <a href="#" >Clubs</a> <a href="#" >Spades</a> <a href="#" >Diamonds</a></body>
和CSS：
.Cardlink { display: block; @R_419_6004@: #666; text-shadow: 0 2px 0 #efefef; text-decoration: none; height: 2.75rem; line-height: 2.75rem; border-bottom: 1px solID #bbb; position: relative;}@media (min-wIDth: 300px) { .Cardlink { padding-left: 1.8rem; Font-size: 1.6rem; } .Cardlink:before { display: block; }}.Cardlink:before { display: none; position: absolute; top: 50%; transform: translateY(-50%); left: 0;}.Cardlink_Hearts:before { content: "❤";}.Cardlink_Clubs:before { content: "♣";}.Cardlink_Spades:before { content: "♠";}.Cardlink_Diamonds:before { content: "♦";}/*@media (min-wIDth: 300px) { .Cardlink:before { display: block; }}*/ 这个想法是当视口大小低于300px时,不显示卡图标,否则显示它们.
我正在玩代码,我无法理解为什么我们必须两次定义@media(min-wIDth：300px)才能使代码按预期工作.
为什么我们不能只将代码放在CSS的最后一段到媒体屏幕大小所属的部分(良好的代码重用而不是再次声明)？
如果我这样做,那么不会显示任何图标(这是下面的代码).
谁能解释一下？检查plunker,这按预期工作：https://plnkr.co/edit/MJAPdkgUegpUlJnkcQHg?p=preview
解决方法 因为您正在使用层叠样式表.级联就像瀑布：渲染引擎从源文档的顶部开始并向下运行.
在这种情况下,它会看到您的媒体查询.然后它会看到您的其余代码,这些代码优先,因为它会在以后出现.
例如,假设你的样式表有这个：
div { @R_419_6004@: red; }div { @R_419_6004@: blue; }div { @R_419_6004@: red; } 您的文字颜色将为红色.
在这种情况下：
div { @R_419_6004@: red; }div { @R_419_6004@: blue; } 您的文字颜色为蓝色.
在这两种情况下,CSS都会选择样式表中的最后一个声明.
如果您希望媒体查询优先,请将其放在代码的末尾.
(看起来很简单,而且经常是这样.只要确保了解CSS specificity.)
总结以上是内存溢出为你收集整理的html – 为什么媒体查询只能在我的CSS中放在最后？全部内容，希望文章能够帮你解决html – 为什么媒体查询只能在我的CSS中放在最后？所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）