微信小程序TDesign UI庫CSS選擇器：.t-grid–card 如何生效？

微信小程序tdesign ui庫css選擇器詳解

在使用微信小程序TDesign UI庫時，開發者可能會對某些css選擇器的作用機制感到困惑。例如，頁面元素的class屬性為t-grid t-card t-class，而對應的CSS選擇器卻是.t-grid–card，這究竟是怎么回事呢？

這種選擇器生效的關鍵在于微信小程序的外部樣式類機制。t-class屬性并非直接應用樣式，而是充當一個橋梁，動態地接收來自TDesign UI庫的樣式類。庫內部通過數據綁定或其他技術手段，將包含.t-grid–card的樣式類賦值給t-class。因此，即使dom結構中沒有直接顯示.t-grid–card，該選擇器也能生效。

.t-grid–card的命名方式遵循BEM（塊(Block)、元素(Element)、修飾符(Modifier)）命名約定，旨在提升CSS的可維護性和可讀性。雖然看起來像BEM，但TDesign UI庫可能對其進行了簡化，–在這里作為修飾符，表示card是t-grid的一個修飾狀態。這種簡化有助于縮短class名稱，提高代碼效率。

立即學習“前端免費學習筆記（深入）”；

最后，需要強調的是，CSS變量以–開頭聲明，并通過var()函數使用。.t-grid–card并非CSS變量，而是一個遵循BEM約定的CSS類名。

以上就是