样式化组件-内联样式与媒体查询样式重叠

基础概念

样式化组件中的内联样式和媒体查询样式是两种不同的CSS应用方式。

内联样式：

内联样式是直接在HTML元素上通过style属性定义的CSS样式。
这种方式的优点是可以快速地为特定元素设置样式，但缺点是不利于样式的复用和维护。

媒体查询样式：

媒体查询是一种CSS技术，允许根据不同的设备特性（如屏幕宽度、高度、分辨率等）应用不同的样式规则。
媒体查询通常在CSS文件中使用@media规则定义，并且可以应用于整个页面或特定的CSS选择器。

类型

内联样式：

直接在HTML元素上使用style属性定义的样式。

媒体查询样式：

使用@media规则在CSS文件中定义的样式。

应用场景

内联样式：

适用于需要快速应用样式且不经常更改的场景。
例如：临时的样式调整或特定的交互效果。

媒体查询样式：

适用于需要根据不同设备特性调整样式的场景。
例如：响应式网页设计，确保在不同设备上都有良好的显示效果。

问题及解决方法

问题：内联样式与媒体查询样式重叠

原因：

内联样式的优先级高于媒体查询样式，因此在冲突时，内联样式会覆盖媒体查询样式。

解决方法：

避免内联样式：尽量使用外部CSS文件和媒体查询来管理样式，避免使用内联样式。
提高媒体查询优先级：通过增加选择器的特异性或使用!important来提高媒体查询样式的优先级。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Media Query vs Inline Style</title>
    <style>
        .container {
            background-color: blue;
        }

        @media (max-width: 600px) {
            .container {
                background-color: red !important; /* 提高优先级 */
            }
        }
    </style>
</head>
<body>
    <div class="container" style="background-color: green;">Hello World</div>
</body>
</html>

解释：