知识卡片

属性前缀选择器的隐性冲突陷阱

专业/工作 · 180

内容

Bootstrap的按钮插件用选择器[data-toggle^=button]匹配所有以”button”开头的data-toggle值(包括button和buttons),但前缀匹配也会意外命中开发者自定义的其他值,比如data-toggle=“buttonABC”,导致自定义功能被误触发。教训是:需要匹配多个具体值时,应该用逗号分隔的精确值选择器(如[data-toggle=“button”],[data-toggle=“buttons”])代替前缀匹配,避免语义过宽带来的隐性冲突。

参考来源

《深入理解Bootstrap》第5章《JavaScript插件》