如何用CSS选择器精准匹配col-*类，排除col-md-*等第三方类？

你可以使用结合属性选择器和:not()的一行代码来精准筛选目标元素：

[class^="col-"]:not([class*="-"][class*="-"])

原理说明 #

• [class^="col-"]：匹配所有class属性值以col-开头的元素
• :not([class*="-"][class*="-"])：排除掉class属性中包含两个或以上连字符-的元素——这类元素正是你提到的col-md-11、col-lg-2等带有断点前缀的类（结构为col-前缀-数字，包含两个连字符）

如果你的场景中存在元素同时拥有col-N和col-xx-N类（比如 <div class="col-4 col-md-11"></div>），且你需要选中这类元素，可以用更精准的方式排除已知断点前缀：

[class*="col-"]:not([class*="-md-"]):not([class*="-lg-"]):not([class*="-sm-"])

这个选择器会匹配所有包含col-的元素，同时排除带有-md-、-lg-、-sm-的元素，适合兼容混合类名的场景。

测试验证 #

用你提供的示例HTML测试第一个选择器，会精准选中以下元素：

• <div class="col-4"></div>
• <div class="col-10"></div>
• <div class="col-3"></div>
• <div class="col-12"></div>
• <div class="col-8"></div>

完全符合需求，不会选中带断点前缀的元素。

内容的提问来源于stack exchange，提问作者Nguyễn Thanh Hòa