html - 如何仅将某些规则应用于其文本内容而不是其子项

Question

简而言之，我有这样的东西:

<span class="className">
    Text text text <button type="button" class="btn btn-default">Button</button>
</span>

.className {
    font-style: italic;
    /* more */
}

我只希望“Text text text”是斜体，it works when I was using Bootstrap 3.0.3 .然而，当我 updated to Bootstrap 3.2.0 ，这些规则现在也适用于 span 中的 button。那不是我想要的行为。

我想知道是否将文本包装在另一个 span 中是修复它的唯一方法。这会使 HTML 变得更加复杂，我真的不想那样做。我还可以显式覆盖 italic 规则:

.className > button {
    font-style: normal;
    /* more */
}

我认为这段代码将来不容易维护，因此我不考虑这个。

有没有其他方法可以将这些规则仅应用于文本内容而不应用于按钮？谢谢。

Answer 1

文本将始终继承父级(在本例中为 .className)具有的任何样式。我认为最好的选择就是调用类似的东西:

button {
    font-style: normal;
}

在顶部的某个地方，因为您可能永远不会想要在您的页面上使用斜体按钮(老实说，我希望它在某个地方的重置中，但我还没有检查 Bootstrap 3 的新样式)。