如果它有一个图标，它会改变按钮填充的选择器

Question

我正在使用带有 Bootstrap 按钮 classes 和一些 CSS 的 Font Awesome 图标来创建圆形按钮：check my CSSDesk. I moved from default Bootstrap to Bootswatch Paper 我不得不覆盖填充：

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

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

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

CSS 有没有办法做这样的事情？预先感谢您花时间帮助我。

Answer 1

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

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