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

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《微信小程序 TDesign UI 库中 CSS 选择器：'.t-grid--card' 如何生效？ 》，聊聊，希望可以帮助到正在努力赚钱的你。

微信小程序 TDesign UI 库中的 CSS 选择器疑问

问题描述：

在小程序中使用 TDesign UI 库时，开发者遇到一个令人困惑的 CSS 选择器：

<p><br>如图，DOM结构中，元素class 是 <code>'t-grid t-card class t-class'</code>,但是选择器是 <code>'.t-grid--card'</code><br>这怎么生效的？这个写法也让我疑惑，像BEM命名又像是CSS变量，但好像都不是。<br>希望有大佬解惑。</p>

问题解答：

'.t-grid--card' 选择器的生效原理如下：

• t-class 类名：这是小程序开发中的一种外部样式类，表示该元素将使用该样式类定义的样式。

• BEM 命名风格：.t-grid--card 采用了 BEM 命名风格，其中:

  • t-grid: 表示元素的块（block）名称
  • --card: 表示元素的元素（element）名称

  在实际项目中使用 BEM 命名时，不一定需要严格按照 DOM 结构增加后缀。为了缩减 class 名称长度，可以根据团队的命名规范进行合理调整。

• CSS 变量：--card 部分不是 CSS 变量，CSS 变量是以 -- 开头声明并且通过 var() 使用。

好了，本文到此结束，带大家了解了《微信小程序 TDesign UI 库中 CSS 选择器：'.t-grid--card' 如何生效？ 》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！