如何在CSS选择器中使用通配符匹配application/*+xml格式的link元素？

CSS 属性选择器不支持在属性值内部用 * 作为通配符做模糊匹配，你最初写的 link[type*="application/*+xml"] 只会匹配 type 属性值里字面包含 application/*+xml 字符串的元素，完全达不到预期效果。

你可以用以下两种方案实现需求：

方案1：精准匹配（最稳妥，无误伤） #

直接并列两个精准属性选择器，只会命中你需要的两类 link 元素：

link[type="application/rss+xml"],
link[type="application/atom+xml"]

这种写法兼容性拉满，也不会误匹配到 application/rdf+xml 这类同后缀的其他类型元素，逻辑最可控。

方案2：模糊匹配（精简代码） #

如果你确认页面中没有其他不需要匹配的 application/xxx+xml 格式的 link，可以用前缀匹配+后缀匹配叠加的方式实现：

link[type^="application/"][type$="+xml"]

语法说明：

• ^= 是前缀匹配规则，type^="application/" 表示匹配 type 值以 application/ 开头的元素
• $= 是后缀匹配规则，type$="+xml" 表示匹配 type 值以 +xml 结尾的元素
  两个规则叠加后，刚好可以覆盖所有 application/xxx+xml 格式的 type 属性，包含你需要的 rss 和 atom 两类。

内容的提问来源于stack exchange，提问作者chovy