父元素仅含一个可见子元素时，如何隐藏父元素或该子元素

方案一：隐藏整个.buttons容器 #

CSS 实现 #

直接给容器设置隐藏样式即可：

.buttons {
  display: none;
}

如果容器存在优先级更高的显示样式，可添加!important强制生效：

.buttons {
  display: none !important;
}

jQuery 实现 #

调用jQuery内置方法或直接修改CSS属性：

// 方法1：使用hide()快捷方法
$('.buttons').hide();

// 方法2：直接设置display属性
$('.buttons').css('display', 'none');

方案二：仅隐藏那个唯一可见的button #

CSS 实现 #

方式1：针对第一个button（已知仅第一个可见）

.buttons button:first-child {
  display: none;
}

若第一个button带有内联显示样式，需添加!important强制覆盖：

.buttons button:first-child {
  display: none !important;
}

方式2：匹配所有未被内联隐藏的button（更通用）

通过属性选择器筛选不含display:none内联样式的button：

.buttons button:not([style*="display:none"]) {
  display: none;
}

jQuery 实现 #

方式1：选中第一个button

$('.buttons button:first').hide();

方式2：选中所有可见的button（更精准）

利用jQuery的:visible选择器匹配当前可见的元素：

$('.buttons button:visible').hide();

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