css 媒体查询におけるスタイルの競合問題の解決
CSS 媒体查询を使用すると、画面のサイズに応じて特定のスタイルを適用できます。ただし、複数のメディアクエリが同じ要素に適用されると、スタイルの競合が発生することがあります。
問題の HTML と CSS では、画面幅が 991px の場合にこの競合が発生しています。両方の max-width: 991px と min-width: 991px メディアクエリが部分的に適用されており、結果的に border-color: black; が適用されていません。
この問題を解決するには、「真の」メディアクエリを使用します。これは、画面幅が特定の値と厳密に一致する場合にのみ適用されるクエリです。
以下の追加された CSS を既存のスタイルシートに追加します。
立即学习“前端免费学习笔记（深入）”；
@media (width: 991px) { /* このメディアクエリのスタイルのみ適用、他のスタイルを上書きする */}
登录后复制
この追加されたメディアクエリは、画面幅が正確に 991px のときにのみスタイルを適用します。これにより、他のメディアクエリや公共のスタイルが上書きされなくなります。
したがって、この修正を適用すると、画面幅が 991px のときに border-color: black; が正しく適用され、スタイルの競合が解決されます。
以上就是## CSS 媒体查询中，如何解决不同媒体查询冲突导致样式失效的问题？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2809280.html
