如何用CSS设置nth-child为display:none？动态元素隐藏求助

嘿，我来帮你搞定这个问题！你之前遇到的问题主要是选择器用错了——td:last-child是选中表格里的最后一个<td>单元格，而不是你目标<td>内部的最后一个子元素，这就导致效果不符合预期啦。

针对你的需求，我们可以用更精准的CSS选择器来实现，完全不需要给动态元素加类名或ID：

具体实现代码 #

/* 隐藏目标td下的第二个<small>标签 */
td.text-left small:nth-of-type(2) {
  display: none;
}

/* 隐藏目标td下的最后一个直接子元素（即那个<a>标签） */
td.text-left > :last-child {
  display: none;
}

选择器说明 #

• td.text-left small:nth-of-type(2)：这个选择器会精准定位到带有text-left类的<td>下的第二个<small>标签。用nth-of-type而不是nth-child的好处是，即使<td>里有其他类型的子元素（比如<span>、<div>等），也不会干扰我们选中第二个<small>，兼容性和可靠性更高。
• td.text-left > :last-child：这个选择器会选中带有text-left类的<td>的最后一个直接子元素，不管它是什么标签，刚好匹配你要隐藏的<a>标签，完美适配动态数据的场景。

如果你页面里只有这一个<td>需要处理，也可以去掉.text-left来简化选择器，但保留它能避免影响页面上其他<td>的元素，更稳妥。

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