通过SCSS隐藏Angular页面中动态生成的指定按钮

嗨，我来帮你搞定这个隐藏按钮的问题！没法改源码只能加SCSS的情况我太懂了，咱们一步步来解决。

首先说说你之前尝试的两个方案为啥没生效：

• 你用的.gen-home-content div:not(:first-child)会匹配这个容器下所有不是第一个的div，包括按钮内部的子div，这就导致样式混乱，没法精准隐藏第二个按钮；
• @extend .single-tile没用是因为页面里根本没定义这个类，SCSS没法扩展一个不存在的样式。

接下来给你几个靠谱的方案，你可以根据实际情况选：

方案1：根据按钮内容精准定位（推荐，更稳定） #

如果你的浏览器支持CSS的:has()选择器（现在Chrome、Firefox、Edge等主流浏览器都支持了），可以直接通过按钮里的标题或者图标来定位，就算以后按钮顺序变了也能生效：

通过标题文本定位 #

.gen-app-tile:has(.tile-title:contains("Direct Deposit")) {
  display: none !important;
}

通过图标资源定位（更稳妥，避免文本变化） #

因为每个按钮的图标路径是唯一的，直接找对应图标的按钮：

.gen-app-tile:has(img[src*="direct_deposit.svg"]) {
  display: none !important;
}

方案2：基于DOM结构位置定位（兼容性更好） #

如果担心:has()的兼容性，咱们可以直接瞄准第二个动态生成的tile容器，因为它是.gen-home-content的第二个直接子元素：

.gen-home-content > .ng-scope:nth-child(2) .gen-app-tile {
  display: none !important;
}

这个方案的唯一注意点是：如果以后页面里动态生成的按钮顺序变了，这个选择器就会选错目标，所以如果按钮顺序大概率不会变，这个方案很稳妥。

你可以先试试方案1里的图标定位版本，一般来说最靠谱，要是遇到兼容性问题再换方案2就行！

备注：内容来源于stack exchange，提问作者Connor Hale