如果元素/标记有文本或同级标记，则使用CSS（或SCS）应用填充

我想知道，比如说我有一个这样的按钮：

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

或

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

---

非常感谢。

您可以尝试：独生子女选择器

.font图标类：唯一子级{ 右边填充：0px； } .font图标类{ 宽度：15px； 背景：石灰； 右侧填充：15px； } 钮扣{ 宽度：150像素 } 测验

---

testHELLOCSS是级联样式表的缩写，这意味着它在代码中添加样式，而不是在代码中添加样式。所以你还不能？我相信我在某个地方读到过，将来，如果一个元素后面有另一个元素，你可以为它添加样式

解决方案-如果您可以访问HTML，可以在.font图标类之后的元素周围添加一个跨距，如下所示：

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

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

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

这将在按钮内的span元素中添加一个填充，如果它位于.font图标类元素之后

按钮是否还应包含文本或其他HTML标记？ 如果您不想，则不需要任何HTML标记或文本

从你的问题我了解到的是，你可以直接这样设计课堂

若你们只想在按钮的下一个元素中添加填充或任何样式，那个么你们可以这样做

.font-icon-class + *{ any Style of your choice }

.font图标类{ 右侧填充：15px； }

---

当然，问题是您定义的任何选择器都将应用于child\sibling\later元素，而不是我知道您已经知道的第一个元素。显然：has即将到来，这可能会解决这个问题，但现在看来，你仍在使用JS解决方案。这是一个多么有灵感的解决方案，爱它，精彩的解决方案。。。但我现在将使用JS。谢谢。@MikeSav这仍然是您问题的正确答案，即使您不打算使用它。如果您将其标记为这样，其他人将来将更容易找到它：-

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

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

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

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

.font-icon-class + span {
   display: inline-block;
   padding-left: 5px; 
}

.font-icon-class + *{ any Style of your choice }