在你的代码中，&:last-child 选择器是用来选中 .hz-tone-tabs-tab 类中的最后一个子元素的。然而，如果这个选择器没有起作用，可能有几个原因：
1. 结构问题
确保 .hz-tone-tabs-tab 确实是其父元素 .hz-tone-tabs-nav-list 的最后一个子元素。如果还有其他兄弟元素在它之后，那么 :last-child 就不会匹配。
例如：
<div class="hz-tone-tabs-nav-list">
<div class="hz-tone-tabs-tab">Tab 1</div>
<div class="hz-tone-tabs-tab">Tab 2</div>
<div class="hz-tone-tabs-tab">Tab 3</div> <!-- 如果这里不是最后一个 -->
<div class="another-element"></div> <!-- 此时 last-child 不会生效 -->
</div>
如果你希望只针对 .hz-tone-tabs-tab 类下的最后一个元素，你可能需要使用 &:last-of-type，这样可以确保选中同类型的最后一个元素：
.hz-tone-tabs-tab {
// ... other styles ...
&:last-of-type {
margin-right: 0px !important;
}
}
2. 确认样式应用优先级
检查是否有其他 CSS 样式或库（如 Bootstrap 或其他）覆盖了你的设置。即使你使用了 !important，也需要保证这个样式能够正确应用。
3. Sass 编译
确保你正在使用的 Sass 编译器能够正常工作，并且将你的嵌套规则编译成正确的 CSS。例如，在最终生成的 CSS 中，你应该能看到类似以下内容：
.hz-tone-tabs-nav-list .hz-tone-tabs-tab:last-child {
margin-right: 0px !important;
}
示例代码
假设以上提到的都已确认无误，你可以查看以下完整示例：
.hz-tone-tabs-nav-list {
display: flex;
justify-content: space-around;
overflow-x: auto;
width: 100%;
padding: 0px 12px 16px;
.hz-tone-tabs-tab {
padding: 0 6px;
margin-right: 8px;
position: relative;
white-space: nowrap;
&.hz-tone-tabs-tab-active::after {
opacity: 1;
}
&:last-of-type { /* 或者使用 :last-child */
margin-right: 0 !important; /* 注意这里不必加 px */
}
::after {
margin-top: 4px;
opacity: 0;
position: absolute;
bottom: -4px;
content: '\20';
width: 26px !important;
height: 2px !important;
background-color: #222 !important;
left: 50%;
transform: translateX(-50%);
}
}
}
通过这些步骤和建议，希望能够帮助你解决 last-child 的问题！
内容由零声教学AI助手提供，问题来源于学员提问
