本文详解如何利用 css 的属性结尾匹配选择器（`[class$="__tienda"]`）高效选中所有 class 名以 `__tienda` 结尾的 `
` 元素，适用于 sass 动态生成的 bem 风格类名场景，并兼容原生 js 与 jquery。
在基于 Sass 构建的响应式楼层平面图（如商场导视系统）中，开发者常采用语义化、可扩展的类命名规范——例如 e-top__tienda、d-mid__der__tienda、a-der__tienda 等。这类命名体现了 BEM（Block-Element-Modifier）思想，其中 __tienda 作为统一的“元素修饰符”，标识该区块为商铺容器。但由于每个
的完整 class 名各不相同且长度不一，无法通过 .__tienda 这样的简单类选择器匹配（该写法仅匹配恰好等于 __tienda 的 class），此时需借助 CSS 的属性选择器（Attribute Selector） 实现精准模式匹配。
✅ 推荐方案：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 并列（如
），则 class 属性值为 "store__tienda active"，不满足 $="__tienda" 条件——此时需改用 JavaScript 方案。
✅ 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 自定义属性提升可维护性：
<div id="e7" class="e-top__tienda" data-tienda="true">E7</div>
对应选择器：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); }
}掌握这一技巧，你将能从容应对任何基于命名约定的动态样式匹配需求。
