如何在CSS属性选择器中匹配两个值且不重复选择器？

嗨，我来帮你搞定这个需求！你想要给所有href属性以mailto或http开头的链接添加:after伪元素，但不想重复写整个选择器对吧？

首先得拆解下你之前尝试的写法为什么失效：[href^="mailto http"]这个选择器的逻辑是匹配href值以"mailto http"这个完整字符串开头的元素，这显然和你要匹配两种不同开头的需求不搭边，自然不会生效。

原生CSS解决方案 #

在原生CSS里，我们可以用分组选择器（逗号分隔）来实现不重复选择器的效果，把两个属性选择器放在一起，共享同一个伪元素规则：

a[href^="mailto"]:after,
a[href^="http"]:after {
  content: "";
  /* 这里可以添加你需要的其他样式，比如图标、文字等 */
}

这个写法的意思是：同时选中所有href以mailto开头的<a>标签的:after伪元素，以及所有href以http开头的<a>标签的:after伪元素，然后给它们应用相同的样式。

预处理器简化写法（Sass/Less） #

如果你用Sass、Less这类CSS预处理器，还可以用嵌套语法进一步简化，避免重复书写:after：

a {
  &[href^="mailto"],
  &[href^="http"] {
    &:after {
      content: "";
      /* 其他样式 */
    }
  }
}

这种写法在预处理器编译后会自动转换成原生CSS的分组写法，代码结构更整洁。

另外补充个小细节：如果你的需求包含https开头的链接，[href^="http"]也能匹配到它，因为https的开头就是http，完全符合你的需求~

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