需要帮助CSS类引用markup-tag

Question

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

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

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

标签

所有有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语法的新知识!但是,我遇到的最大问题似乎是我添加的填充参数被浏览器覆盖了.但是通过使用!importantCSS标志并将类编写为已修复的类:

.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该类