Question

我正在与Vaadin合作，这是一个类似GWT的框架，用于开发丰富的Web应用程序。

现在我想在我的标记中设置生成的HTML标记元素的填充，我遇到了很大的问题......

这是标记从Firebug中获取的方式：

http://img39.imageshack.us/img39/2495/cssclassproblems.png

标签

V-的FormLayout-captioncell
V-的FormLayout-errorcell
V-的FormLayout-contentcell

都有padding-top: 12px和padding-bottom: 12px，我真的想将此填充更改为2px，但我似乎无法让它工作。

我已经尝试过这些组合：

.v-formlayout-captioncell td {
    padding-top: 2px;
    padding-bottom: 2px;
}

v-formlayout-row td {
    padding-top: 2px;
    padding-bottom: 2px;
}

.v-formlayout-row th,
.v-formlayout-row td {
    padding-top: 2px;
    padding-bottom: 2px;
}

但是它们都没有对填充产生任何影响......对于CSS和HTML比我更了解的人请看看这个，并就如何编写CSS类来做我想做的事情发表意见。如果您希望我提供更多信息，请询问！ =）

提前致谢！

编辑：感谢Taryn East您的回答，它确实让我了解了一些关于CSS语法的新内容！但是，我遇到的最大问题似乎是我添加的填充参数被浏览器覆盖了。但是通过使用!important CSS标志并将类编写为已修复的类：

.v-formlayout-row td {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

Answer 1

如果班级在td中，那么它应该是：

td.v-formlayout-captioncell

这里的css是说“找到一个类'v-formlayout-captioncell'” 相比之下，你的CSS说：“找到一个td，它是类'v-formlayout-captioncell'的后代”

修改

formatrow无效的原因是因为CSS总是选择最里面的样式，即

<tr class="a"><td class="b"></td></tr>

然后b类中的任何内容都将覆盖类a中类似的任何内容。

在你的情况下 - per-td填充是由外部类设置的，并且你没有用td上的2px填充覆盖它...并且你放入tr的任何填充只是被覆盖由td上的外部定义的类。

“重要”修复了因为它赋予了它优先于tr样式，尽管它们“更内在”，但它们覆盖了最里面的样式 - 因为它们只有正常的优先级。但是 - 在你的情况下，这是一种不必要的黑客攻击。

更好的练习修复就是使用td.v-formlayout-captioncell类

需要帮助CSS类引用markup-tag

1 个答案: