如果有图标则更改按钮填充的选择器[重复]答案

【问题标题】：Selector which change button padding if it has an icon [duplicate]如果有图标则更改按钮填充的选择器[重复]
【发布时间】：2015-05-09 04:24:44
【问题描述】：

我正在使用带有 Bootstrap 按钮类和一些 CSS 的 Font Awesome 图标来创建圆形按钮：check my CSSDesk。我从默认的 Bootstrap 移动到 Bootswatch Paper，我不得不覆盖填充：

td > .btn-sm.btn-circle {
padding: 6px 12px !important;
}

强制执行与我的 CSSDesk 中相同的行为。但是当我想使用fa-user-plus 图标时，我发现这个图标比其他图标更宽，然后按钮就像椭圆而不是圆形，我需要用新值覆盖右填充。我可以使用 CSS 选择器来实现它，只有当它有 fa-user-plus 类的孩子时才会更改按钮？像这样的：

td > .btn-sm.btn-circle:with-child(.fa-user-plus) {...}

在 CSS 中可以做这样的事情吗？提前感谢您花时间帮助我。

【问题讨论】：

【解决方案1】：

不幸的是，据我所知，css 中没有 :with-child 类型选择器。您可以做的是使用 javascript 来确定 .btn-sm.btn-circle 是否有子 .fa-user-plus，然后向 .btn-sm.btn-circle 添加一个新类。然后使用 css 生成您的样式：

td > .btn-sm.btn-circle.has-fa-user-plus {/*do stuff*/}

【讨论】：