如何用CSS选择结尾字符属性值

CSS中的[attr$="val"]属性选择器能精准匹配属性值以指定字符串结尾的元素，例如让所有PDF链接变红加粗，或筛选class属性整体以“btn”结尾的按钮——但需注意其大小写敏感性及对多类名的限制（如不匹配"class='btn primary'"），适用于URL类型识别、文件格式标记等实用场景，是前端开发中简洁高效的定位利器。

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

语法：属性值以特定字符结尾

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

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

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

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

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

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

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

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

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

提示与注意事项

• $= 是大小写敏感的，除非你配合 i 标志（在支持的情况下）进行不区分大小写的匹配。
• 对于 class 或 data 属性，确保理解属性值是完整字符串，而不是单个词。
• 若要更灵活地匹配类名中的某个部分，建议结合JavaScript或使用更现代的方案如 :has（在支持的浏览器中）。

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

今天关于《如何用CSS选择结尾字符属性值》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！