如何用CSS选择并隐藏不含带nice类<i>元素的copy-button按钮

你的问题核心是CSS目前没有原生的父选择器，你之前的写法都是在选中按钮的子元素进行隐藏，而非按钮本身，所以达不到预期效果。以下两种方法可以实现需求：

方法一：使用CSS :has() 伪类（现代浏览器支持） #

:has() 是CSS新增的伪类，允许根据子元素的存在或状态选择父元素，完全匹配你的场景。

修改CSS为：

/* 隐藏所有不包含带有nice类的<i>元素的.copy-button按钮 */
.copy-button:not(:has(i.nice)) {
  display: none;
}

这个规则会直接选中不包含带有nice类的<i>子元素的.copy-button按钮，并将其隐藏。

注意兼容性：目前Chrome、Safari已原生支持，Firefox需要在about:config中开启layout.css.has-selector.enabled选项，旧版浏览器不支持此特性。

方法二：使用JavaScript（兼容所有浏览器） #

如果需要兼容不支持:has()的旧浏览器，可以用JavaScript实现逻辑：

在<body>末尾添加以下脚本：

<script>
// 获取所有.copy-button按钮
const copyButtons = document.querySelectorAll('.copy-button');
copyButtons.forEach(button => {
  // 检查当前按钮是否包含带有nice类的<i>元素
  const hasNiceIcon = button.querySelector('i.nice');
  if (!hasNiceIcon) {
    // 不包含则隐藏按钮
    button.style.display = 'none';
  }
});
</script>

为什么你之前的写法无效？ #

你之前写的.copy-button > :not([class*="nice"])是选中按钮内部没有nice类的子元素（比如第二个按钮里的文本节点），设置的是子元素的visibility: hidden，而非按钮本身的隐藏，所以按钮依然会显示，只是内部内容被隐藏，这和你的需求不符。

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