UIkit组件的自定义样式为啥不生效？

爱学习的迁迁提问于 2026-03-14 20:42:21 阅读 42

组件

我在用UIkit做项目时，想改一个.uk-card的背景色，但加了自定义CSS就是没反应。是不是UIkit的样式优先级太高了？我试过直接在组件上写style也不行。

这是我的CSS代码：

.uk-card {
  background-color: #f0f0f0 !important;
}

控制台里看样式明明加载了，但页面还是显示默认的白色背景，到底哪里出问题了？

我来解答赞 8 收藏

反馈

1 条解答

码农怡博 Lv1

兄弟，你这个坑我踩过！直接在 .uk-card 上写样式不生效，不是优先级的问题，而是UIkit的卡片组件默认还有个 .uk-card-default 类，它的选择器比你这个更具体。

最直接的解决办法：把选择器写具体一点

.uk-card.uk-card-default {

  background-color: #f0f0f0 !important;

}

或者你也可以直接覆盖到body上：

.uk-card-default {

  background-color: #f0f0f0 !important;

}

还有个更规范的方式是用UIkit的CSS变量。UIkit 3支持CSS变量，在你的样式文件里这样写：

:root {

  --uk-card-default-background: #f0f0f0;

}

这样改的好处是以后好维护，不会跟UIkit的升级冲突。

至于为什么直接在组件上写style也不生效...那是因为UIkit内部用了更具体的选择器覆盖了你的行内样式，跟优先级没关系，就是选择器特异性(specificity)的问题。

2026-03-17 09:04