微信小程序 TDesign UI 库的 CSS 选择器 .t-grid--card 如何生效？

微信小程序 tdesign ui 库的 css 选择器疑问解答

在微信小程序 TDesign UI 库中，有一个 CSS 选择器 .t-grid--card 引起了一些疑惑。它的父元素 class 为 't-grid t-card class t-class'，但选择器却不同。

疑问：

1. 这个选择器如何生效？
2. 它的命名风格看起来既像 BEM，又像 CSS 变量，但似乎都不是。

解答：

1. 选择器生效原理：

   立即学习“前端免费学习笔记（深入）”；

   

   小微助手

   微信推出的一款专注于提升桌面效率的助手型AI工具

   47

   查看详情

   .t-grid--card 选择器是通过小程序开发中的外部样式类传入的。在元素的 class 中，存在 t-class，它指向了外部样式类中的 .t-grid--card。

2. 命名规则解释：

   确实使用了 BEM 命名风格。但在实际项目中，为了缩减 class 名称的长度，可对 BEM 后缀进行合理调整，不必严格按照 DOM 结构。

   CSS 变量则是以 -- 开头来声明的，再通过 var() 函数使用。因此，.t-grid--card 不是 CSS 变量。

以上就是微信小程序 TDesign UI 库的 CSS 选择器 .t-grid--card 如何生效？的详细内容，更多请关注php中文网其它相关文章！