如何仅当p.extend-button-field存在时才应用对应CSS规则

纯CSS即可实现该需求，不需要额外JavaScript逻辑，核心是使用CSS相邻兄弟选择器匹配元素存在的场景。

实现逻辑 #

你的DOM结构中，两个按钮同时渲染时，.extend-button-field（Extend按钮容器）和.relist-button-field（Relist按钮容器）是同级相邻元素，且Extend按钮在前、Relist按钮在后。我们只需要让padding-left: 0 !important规则只命中「紧跟在Extend按钮容器后面的Relist按钮容器」即可，单独存在的Relist按钮不会被该选择器匹配。

修改后的完整CSS代码 #

.parent p {
  padding: 5px 20px 5px 162px !important;
}

.parent .extend-button-field,
.parent .relist-button-field {
  display: inline-block;
}

/* 替换原有的.relist-button-field规则，仅双按钮场景生效 */
.parent .extend-button-field + .relist-button-field {
  padding-left: 0 !important;
}

效果验证 #

• 双按钮共存的红色容器：Relist按钮左内边距为0，和Extend按钮正常并排显示
• 仅存Relist按钮的绿色容器：Relist按钮保留统一的162px左内边距，和其他表单字段对齐规则一致

注：该选择器兼容所有现代浏览器，以及IE7及以上版本的IE浏览器，无兼容性问题。

内容的提问来源于stack exchange，提问作者Faye D.