css - 如果元素/标签有文本或同级标签，则使用 CSS(或 SCSS)应用填充

Question

我在想，假设我有一个这样的按钮:

<button><i class="font-icon-class"></i></button>

如果按钮还包含文本或其他 HTML 标记，我是否可以向 .font-icon-class 添加填充(或任何其他样式)？所以如果我的按钮是这样的:

<button><i class="font-icon-class"></i> Button Text </button>

或

<button><i class="font-icon-class"></i> <img src="..."></button>

我想我可以使用 CSS 选择器来应用 padding-right，比如

.font-icon-class + * { 
   padding-right: 5px; 
}

显然这行不通，我知道我可以使用 JavaScript，但我想知道 CSS 是否可以提供解决方案？

非常感谢。

Answer 1

你可以试试 :only-child 选择器

.font-icon-class:only-child {
  padding-right: 0px;
} 

.font-icon-class {
  width: 15px;
  background: lime;
  padding-right: 15px;
}

button {
  width: 150px
}

<button><i class="font-icon-class">test</i></button>
<button><i class="font-icon-class">test</i><span>HELLO</span></button>