HTML class 中 CSS名称的顺序并不重要

的确是这样!我可以证明。让我们先来看一些CSS代码:

css 复制代码
.a {
  color: red;
}

.b {
  color: blue;
}

现在让我们看一些标记:

html 复制代码
<div class="a b">Here's some text</div>

文本会是蓝色的,因为.b 在CSS中是最后定义的,对吧?但如果我们改变一下在HTML中调用这些类的顺序:

html 复制代码
<div class="b a">Here's some text</div>

你认为文字应该是什么颜色?红色还是蓝色?

这听起来可能是一个愚蠢的问题,但它往往会绊倒许多碰巧熟悉CSS-in-JS解决方案的人。本周,我与两位非常资深的前端工程师进行了交谈,他们也有类似的想法!

但是无论这些CSS类的顺序如何,上面示例中的文本始终是蓝色的。这是因为标记只是按照CSS的写入顺序读取------在这个例子中,层叠优先。

相关推荐
JarvanMo几秒前
停止与 Compose 导航作斗争(这 5 个技巧将改变一切)
前端
trsoliu10 分钟前
前端周刊第437期:AI编程助手、WebGPU实战与React生态新动态
前端
trsoliu16 分钟前
2025年Web前端前沿技术动态:WebGL动画、CSS View Transitions与HTML隐藏API
前端·javascript·css
trsoliu18 分钟前
2025年Web前端最新趋势:React基金会成立、AI编码助手崛起与Astro极速搜索
前端·javascript·react.js
一 乐22 分钟前
商城推荐系统|基于SprinBoot+vue的商城推荐系统(源码+数据库+文档)
前端·数据库·vue.js·spring boot·后端·商城推荐系统
亿元程序员27 分钟前
为什么游戏公司现在都喜欢用protobuf?
前端
鹏多多29 分钟前
React瀑布流Masonry-Layout插件全方位指南:从基础到进阶实践
前端·javascript·react.js
fruge36 分钟前
前端数据可视化实战:Chart.js vs ECharts 深度对比与实现指南
前端·javascript·信息可视化
卓码软件测评1 小时前
借助大语言模型实现高效测试迁移:Airbnb的大规模实践
开发语言·前端·javascript·人工智能·语言模型·自然语言处理
IT_陈寒1 小时前
SpringBoot 3.0实战:这套配置让我轻松扛住百万并发,性能提升300%
前端·人工智能·后端