如何仅对其文本内容而不是其子项应用某些规则

时间:2014-07-11 02:33:37

标签: html css twitter-bootstrap

简而言之,我有这样的事情:

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

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

我只希望“文本文本文本”为斜体,it works when I was using Bootstrap 3.0.3。但是,当我updated to Bootstrap 3.2.0时,这些规则现在也适用于button中的span。这不是我想要的行为。

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

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

我认为这段代码在将来不易维护,因此我不会考虑这个。

有没有其他方法只将这些规则应用于文本内容而不是按钮?感谢。

1 个答案:

答案 0 :(得分:1)

Text将始终继承父级(在本例中为.className)具有的任何样式。我认为最好的选择就是打电话:

button {
    font-style: normal;
}

在顶部的某个地方,因为你可能不会想要在你的页面上使用斜体按钮(老实说,我希望这可以在某处重置,但我还没有选择Bootstrap 3的新风格)。