CSS选择器属性值匹配应用_starts-with ends-with contains实践

新闻中心 NEWS CENTER

2025-11-24

浏览次数：次

答案：CSS属性选择器^[、$^和*^可分别匹配属性值开头、结尾和包含特定字符串的元素，适用于统一组件样式、区分资源类型及高亮动态内容，提升样式控制灵活性且减少冗余代码。

css选择器属性值匹配应用_starts-with ends-with contains实践

在CSS中，属性选择器非常实用，尤其当我们需要根据属性值的特定模式来选中元素时。其中，starts-with、ends-with 和 contains 是三种常用的属性值匹配方式，它们通过不同的符号实现模糊匹配。下面介绍它们的实际用法和常见应用场景。

使用 [attr^="value"] 可以选择属性值以指定字符串开头的元素。

例如，想为所有以 "btn-" 开头的 class 名称添加样式：

[class^="btn-"] {
  padding: 10px;
  border-radius: 4px;
}

这会匹配 class="btn-primary"、class="btn-danger" 等元素。适用于统一处理具有相同前缀的组件类名。

使用 [attr$="value"] 匹配属性值以指定字符串结尾的元素。

比如，给所有以 ".png" 结尾的图片加上边框：

语鲸

AI智能阅读辅助工具

314 查看详情

img[src$=".png"] {
  border: 1px solid #ccc;
}

这个规则只会作用于 PNG 图片，适合做资源类型区分。

使用 [attr*="value"] 可以选择属性值中包含指定子串的元素。

例如，高亮所有 data-category 属性中包含 "sale" 的商品项：

[data-category*="sale"] {
  background-color: #fff3cd;
}

像 "summer-sale"、"clearance-sale-2025" 都会被匹配到。注意，这个匹配是部分匹配，容易误伤，建议结合具体上下文使用。

这类属性选择器在动态内容、模板渲染或第三方系统中特别有用，无需额外类名就能实现样式控制。基本上就这些，掌握好 ^=、$=、*= 三种语法，能大幅提升CSS的灵活性和实用性。不复杂但容易忽略细节，合理使用可以减少冗余代码。基本上就这些。

以上就是CSS选择器属性值匹配应用_starts-with ends-with contains实践的详细内容，更多请关注其它相关文章！