如何通过css选择结束字符属性值_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

2025-10-28

浏览次数：次

使用[attr$="val"]选择器可匹配属性值以指定字符串结尾的元素，如a[href$=".pdf"]{color:red;}使PDF链接变红加粗，[class$="btn"]仅匹配class属性值整体以btn结尾的元素，需注意大小写敏感及多类名限制。

如何通过css选择结束字符属性值

在CSS中，你可以使用属性选择器来匹配元素的属性值以特定字符结尾。这通过 属性选择器 中的 $= 操作符实现，它用于选择属性值 以指定字符串结尾 的元素。

使用 [attribute$="value"] 语法来选择属性值以指定内容结尾的元素。

示例1：选择以特定字符串结尾的链接

比如你想选中所有文件名为 .pdf 结尾的链接：

a[href$=".pdf"] {
  color: red;
  font-weight: bold;
}

这个规则会让所有跳转到PDF文件的链接变成红色加粗。

示例2：选择以特定字符结尾的类名（不推荐仅靠此方式）

Musho

AI网页设计Figma插件

76 查看详情 Musho

CSS不能直接“选择类名以某字符结尾”除非你用属性选择器匹配 class 属性整体值。注意：一个元素可能有多个类，所以要小心使用。

[class$="btn"] {
  border: 1px solid #ccc;
}

这条规则会匹配 class="submit-btn" 这种整个 class 属性以 btn 结尾的情况，但不会匹配 class="btn primary"，因为属性值是以 primary 结尾的。

提示与注意事项

立即学习“前端免费学习笔记（深入）”；

基本上就这些。使用 [attr$="val"] 可以高效定位属性值结尾固定的元素，适合处理URL、文件类型、自定义属性等场景。

以上就是如何通过css选择结束字符属性值的详细内容，更多请关注其它相关文章！