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

最新推荐文章于 2024-06-12 22:32:31 发布

YodgeGGG

最新推荐文章于 2024-06-12 22:32:31 发布

阅读量234

点赞数 1

分类专栏：前端 CSS 文章标签： css html

本文链接：https://blog.csdn.net/RoonaTh/article/details/110877639

版权

前端同时被 2 个专栏收录

21 篇文章 1 订阅

订阅专栏

CSS

7 篇文章 0 订阅

订阅专栏

通过案例(面试题)来讲解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应用的顺序，定义越靠后优先级越高

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

YodgeGGG

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
通过案例(面试题)来讲解class优先级的问题

通过案例(面试题)来讲解class优先级的问题首先先看问题<html><style> .class1{ color:red; } .class2{ color:blue; }</style><p class="class1 class2">abc</p><p class="class2 class1">abc</p><html&g
复制链接

扫一扫