如何在存在两个相同元素时为全部元素应用(S)CSS样式（无需JS）

这个问题我之前也碰到过，刚好可以用纯CSS解决，不用依赖JavaScript统计元素数量加类名！要实现当<div>内存在至少两个<a>标签时，给所有<a>都应用样式，有两种实用方案：

方案一：现代浏览器首选——:has()伪类（推荐） #

这是最简洁直观的方法，目前主流浏览器（Chrome、Firefox 121+、Safari 15.4+）都已经支持:has()伪类：

/* 匹配包含至少两个<a>的<div>，并选中其中所有<a> */
div:has(a + a) a {
  /* 这里写你的样式 */
  color: #2563eb;
  padding: 0 4px;
  border-bottom: 1px dashed #2563eb;
}

原理说明： #

• a + a 表示“一个<a>紧跟在另一个<a>之后”，只要这个选择器能匹配到元素，就说明<div>里至少有两个<a>；
• div:has(a + a) 会筛选出满足上述条件的<div>；
• 最后通过末尾的a选中这个<div>内的所有<a>标签，实现给所有符合条件的链接加样式的需求。

方案二：兼容旧浏览器的替代方案（如果需要） #

如果要支持不兼容:has()的旧浏览器，可以结合:first-child和兄弟选择器来实现，不过需要把样式写两次：

/* 选中第一个<a>，仅当它后面还有其他<a>时生效 */
div a:first-child:has(~ a) {
  color: #2563eb;
  padding: 0 4px;
  border-bottom: 1px dashed #2563eb;
}

/* 选中第一个<a>之后的所有<a> */
div a:first-child ~ a {
  color: #2563eb;
  padding: 0 4px;
  border-bottom: 1px dashed #2563eb;
}

不过要注意，这个方案还是用到了:has()来判断第一个<a>后面是否有兄弟元素，如果是完全不支持:has()的超老浏览器，纯CSS确实没有完美的解决方案，这时候可能只能妥协用JS，但既然你明确不想用JS，优先推荐方案一就好。

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