CSS属性选择器结尾匹配用法详解

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

实际应用场景

• 区分文件类型：为不同扩展名的下载链接设置图标或颜色，如 .zip、.docx、.mp4 等。
• 处理动态类名：某些框架生成的类名有固定后缀，可用此选择器统一处理。
• 表单优化：匹配 name 属性以特定词结尾的输入框，例如所有以 "email" 结尾的字段。

input[name$="email"] {
  background-color: #f0f8ff;
}

注意事项

• 匹配是区分大小写的。例如，[href$=".PDF"] 不会匹配 ".pdf"。
• 必须完全匹配结尾部分，不能包含多余字符。
• 不支持正则表达式，只能写固定字符串。

a[href$=".PDF" i] {
  color: green;
}

基本上就这些。掌握 [attribute$="value"] 能让你更灵活地控制页面样式，特别适合处理具有规律性属性值的元素。不复杂但容易忽略。

好了，本文到此结束，带大家了解了《CSS属性选择器结尾匹配用法详解》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！