如何不借助JS/CSS类ID设置超链接差异化样式？基于URL特征

没问题！其实不用JavaScript，也不用给每个超链接加新类或ID，CSS的属性选择器就能完美解决这个需求——它可以直接根据href属性里的URL内容来匹配元素，设置差异化样式。

针对你举的例子：一个是带http的链接，一个是不带的，我们可以这样写CSS：

/* 匹配所有 href 以 "http" 开头的超链接 */
a[href^="http"] {
  color: #2196F3; /* 蓝色 */
  text-decoration: underline;
}

/* 匹配所有 href 不以 "http" 开头的超链接 */
a:not([href^="http"]) {
  color: #4CAF50; /* 绿色 */
  text-decoration: none;
  border-bottom: 1px dotted #4CAF50;
}

更多灵活的属性选择器用法 #

除了匹配开头，你还可以根据URL的其他特征来设置样式：

• 匹配包含特定文本的URL：比如所有包含google的链接，用a[href*="google"]
• 匹配以特定后缀结尾的URL：比如所有.com结尾的链接，用a[href$=".com"]
• 匹配完全等于某个URL的链接：用a[href="https://www.google.com"]

这些选择器完全不需要修改HTML结构，直接通过URL特征就能精准定位超链接，满足你的差异化样式需求～

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