如何无需添加额外类，用伪选择器选中最后一个.feature元素

嘿，我完全懂你的烦恼——每个.feature都被单独的.col容器包着，它们根本不是直接的兄弟元素，所以直接用.feature:last-child肯定抓不到目标。不过不用加额外类也能搞定，给你几个实用的方案：

方案1：利用父级结构的:last-child（最推荐） #

你的HTML里所有.col都是.row的直接子元素，所以我们可以先定位到.row里最后一个.col，再选中它里面的.feature，代码如下：

.row > .col:last-child .feature {
  /* 在这里写你要给最后一个feature的样式，比如： */
  background-color: #f0f0f0;
  border-radius: 8px;
}

这个方法完全依赖现有结构，纯CSS实现，不需要任何额外改动，兼容性也拉满。

方案2：使用:has()伪类（更灵活的现代方案） #

如果未来你的结构可能有变化，或者想更精准地匹配包含.feature的最后一个容器，可以用CSS的:has()伪类（现代浏览器都支持）：

.row .col:has(.feature):last-child .feature {
  /* 你的样式 */
}

这个写法会先找到所有包含.feature的.col，再选中其中最后一个里面的.feature，容错性更强。

方案3：JavaScript动态定位（兼容老浏览器或动态场景） #

如果需要兼容非常旧的浏览器，或者页面内容是动态渲染的，用JS也能轻松搞定：

// 获取所有.feature元素集合
const allFeatures = document.querySelectorAll('.feature');
// 选中最后一个元素
if (allFeatures.length > 0) {
  const lastFeature = allFeatures[allFeatures.length - 1];
  // 直接设置样式
  lastFeature.style.marginBottom = '0';
  // 或者如果你还是不想加类，也可以直接操作样式属性
}

总结一下，优先用方案1，结构明确的情况下最简洁可靠；如果结构多变就用方案2；动态场景再考虑方案3。

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