结尾匹配CSS选择器与:last-of-type不兼容？技术咨询

首先得给你明确一下:last-of-type的真实作用——它只看标签类型，是选父元素下同标签的最后一个元素，而不是“匹配某个选择器的最后一个元素”。举个实际的DOM例子你就懂了：

<div class="form-group email-name">邮箱输入框</div>
<div class="form-group phone-name">电话输入框</div>
<div class="form-group">其他输入框</div>

当你写.form-group[class$="name"]:last-of-type时，浏览器会去找父元素下最后一个<div>，也就是那个不带name结尾class的.form-group，自然不会应用你的样式。这就是问题的根源～

既然要通用化，我给你几个靠谱的办法：

1. 用CSS:has()选择器（现代浏览器首选） #

:has()是CSS里的“父选择器”，能让你根据兄弟元素的情况来定位目标，完美解决“找最后一个匹配选择器的元素”的需求：

/* 两种情况：要么是最后一个子元素且匹配，要么后面跟着不匹配的元素 */
.form-group[class$="name"]:last-child,
.form-group[class$="name"]:has(+ :not([class$="name"])) {
  /* 比如去掉底部间距 */
  padding-bottom: 0;
  margin-bottom: 0;
}

如果父元素里只有.form-group这一种标签，写法还能更简洁。现在Chrome、Firefox、Safari的新版本都支持:has()，兼容性足够覆盖大多数场景。

2. 兄弟选择器“反向覆盖”（兼容旧浏览器） #

要是需要支持老浏览器，比如IE11，可以用这个思路：先给所有匹配[class$="name"]的元素加样式，再把“后面还有同匹配元素”的那些恢复原样：

/* 先给所有符合条件的元素设置目标样式 */
.form-group[class$="name"] {
  padding-bottom: 0;
}
/* 然后给后面还跟着同匹配元素的，恢复默认的padding */
.form-group[class$="name"] + .form-group[class$="name"] {
  padding-bottom: 10px; /* 和.form-group原来的padding一致 */
}

这样一来，只有最后一个匹配的元素会保留目标样式，前面的都会被覆盖回去，完全不用硬编码位置。

3. JavaScript辅助（复杂场景兜底） #

如果CSS的方法都满足不了你的需求，用JS动态加class是最稳妥的：

// 找到所有匹配的.form-group
const targetGroups = document.querySelectorAll('.form-group[class$="name"]');
// 如果有匹配的元素，给最后一个加专属class
if (targetGroups.length > 0) {
  targetGroups[targetGroups.length - 1].classList.add('last-name-form-group');
}

然后CSS里直接写这个class的样式：

.last-name-form-group {
  /* 你的自定义样式 */
}

这种方法兼容性拉满，不管什么浏览器都能生效，逻辑也直白好维护。

你原来的写法失效，核心是对:last-of-type的作用范围理解错了——它不认选择器匹配，只认标签类型。上面三个方法都能帮你实现通用化的需求，不用硬写:nth-child()，你可以根据自己的浏览器兼容要求来选～

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