通过案例(面试题)来讲解class优先级的问题

最新推荐文章于 2024-06-16 17:29:19 发布

原创最新推荐文章于 2024-06-16 17:29:19 发布 · 333 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #html

收录于

前端同时被 2 个专栏收录

21 篇文章

订阅专栏

CSS

7 篇文章

订阅专栏

本文通过一个面试题案例，揭示了CSS中class样式的优先级不是由应用顺序决定，而是依据定义顺序。无论在HTML中如何调整class的顺序，样式生效的优先级始终遵循定义时的顺序，定义越后的class优先级越高。这个概念对于理解和解决CSS冲突至关重要。

通过案例(面试题)来讲解class优先级的问题

首先先看问题

<html>
<style>
    .class1{
        color:red;
    }
    
    .class2{
        color:blue;
    }
</style>

<p class="class1 class2">abc</p>
<p class="class2 class1">abc</p>
<html>

这段代码的结果如下图

在这里插入图片描述
你会发现下面p标签中无论如何调换class1和class2的位置，最终结果都还是上图，这就引申出了class的优先级问题，即class样式的优先级（或者层叠效果）是根据class在style或者css文件中定义的顺序比较，而不是根据class应用的顺序，定义越靠后优先级越高