本文详解如何利用 css 的属性结尾匹配选择器（`[class$=”__tienda”]`）高效选中所有 class 名以 `__tienda` 结尾的 `
在基于 Sass 构建的响应式楼层平面图（如商场导视系统）中，开发者常采用语义化、可扩展的类命名规范——例如 e-top__tienda、d-mid__der__tienda、a-der__tienda 等。这类命名体现了 BEM（Block-Element-Modifier）思想，其中 __tienda 作为统一的“元素修饰符”，标识该区块为商铺容器。但由于每个
✅ 推荐方案：CSS 属性结尾选择器 [class$=”…”]
CSS 提供了 $= 操作符，用于匹配属性值以指定字符串结尾的元素。对于本例，只需一行声明即可选中所有 class 属性值以 __tienda 结尾的
div[class$="__tienda"] { outline: 2px solid #ff6b6b; background-color: rgba(255, 107, 107, 0.1); }? 原理说明：[class$=”__tienda”] 表示“class 属性的完整值以 __tienda 结尾”。它不要求 class 是唯一值，但要求 __tienda 必须是 class 属性字符串的末尾子串。例如：✅ 匹配：class=”e-top__tienda”、class=”d-mid__der__tienda”、class=”m-abajo-medio__tienda”❌ 不匹配：class=”tienda”、class=”tienda__main”、class=”shop__tienda extra”（因含空格，class 属性值实际为 “shop__tienda extra”，不以 __tienda 结尾）
⚠️ 重要限制：该选择器仅适用于 class 属性中 __tienda 位于末尾且无后续其他 class 的情况。若 html 中存在多 class 并列（如
✅ javascript / jquery 动态增强方案
当页面存在多 class 或需执行复杂逻辑（如绑定事件、动态添加样式），推荐使用脚本处理：
立即学习“前端免费学习笔记（深入）”；
原生 JavaScript（推荐，无需依赖）
// 选取所有 class 属性值以 '__tienda' 结尾的 div 元素 const tiendaDivs = document.querySelectorAll('div[class$="__tienda"]'); tiendaDivs.forEach(el => { el.style.border = '2px dashed #4ecdc4'; el.addEventListener('click', () => { console.log('Shop ID:', el.id); }); });jQuery（兼容旧项目）
$('div[class$="__tienda"]').css({ 'border': '2px dashed #4ecdc4', 'cursor': 'pointer' }).on('click', function() { alert(`Selected shop: ${this.id}`); });? 注意事项与最佳实践
- 避免误匹配：切勿使用 [class*=”__tienda”]（包含匹配），它会错误捕获 class=”my__tienda__backup” 或 class=”not__tienda_main” 等非目标元素。
- Sass 编译提示：若使用 Sass，可在 .tienda-wrapper 父容器内统一定义样式，再通过嵌套规则生成对应类，但运行时仍需靠属性选择器定位——二者互补，不可替代。
- 性能考量：[class$=”…”] 属于“低效选择器”，但在现代浏览器中对数百个元素的匹配性能完全可接受；若 dom 超过 5000 节点，建议结合 data-tienda 自定义属性提升可维护性：
E7
对应选择器：div[data-tienda=”true”] —— 更语义、更高效、更易扩展。
✅ 总结
面对 Sass 自动生成的、结构多样但后缀统一的类名（如 xxx__tienda），div[class$=”__tienda”] 是最简洁、标准、零依赖的解决方案。它直击问题本质，无需修改 HTML 结构或引入额外库，同时具备良好的可读性与可维护性。在实际项目中，建议将该选择器封装为 scss 变量或混合宏（mixin），实现一次定义、全局复用：
// _utilities.scss @mixin tienda-selector { div[class$="__tienda"] { @content; } } // 使用 @include tienda-selector { transition: transform 0.2s ease; &:hover { transform: scale(1.02); } }掌握这一技巧，你将能从容应对任何基于命名约定的动态样式匹配需求。