如何将.h1，.h2，...样式应用于表单字段？

Question

我正在构建一种CMS应用程序，用户可以在其中设置页面标题。我尽量做到所见即所得，所以要显示我的标题字段，我想应用最终标题的风格。

标题将使用：

显示

<div class="h1">My gorgeous title</div>

但看起来.form-control类强制执行对齐和字体大小：将h1作为字段类无效（您可以检查fiddle）：如果我将其删除，h1适用但不再对齐。

是否有诀窍强制执行另一种字体大小而不更改对齐？

Answer 1

在CSS中，id的样式总是胜过class的样式。

您所看到的是#textinput2的样式（我认为继承自body）胜过.h1的样式。

您的解决方案是为同时id #textinput2和同时 class .h1的元素指定样式规则。

然后你会得到你想要的结果：

#textinput2.h1 {
font-size: 36px;
line-height: 48px;
height: 48px;
}

=====

替代（更通用）解决方案

input[value~='.h1'] {
font-size: 36px;
line-height: 48px;
height: 48px;
}

此CSS会将样式应用于input属性包含单词value的任何.h1元素。 （您可以根据需要调整触发词。）