html - 需要帮助引用标记标签的 CSS 类

Question

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

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

这是从 Firebug 中获取的标记的样子:

标签

• v-formlayout-captioncell
• v-formlayout-errorcell
• v-formlayout-contentcell

都有padding-top: 12px 和padding-bottom: 12px，我真的很想把这个padding改成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’类的 td” 相比之下，你的 css 是说:“找到一个 td，它是类 'v-formlayout-captioncell' 的后代”

编辑:

formatrow 不起作用的原因是因为 CSS 总是选择最里面的样式，即 for

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

那么 b 类中的任何内容都会覆盖 a 类中的任何类似内容。

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

“重要”修复了这个问题，因为这赋予了 tr 样式优先级，尽管它们“更内在”，但它们覆盖了最内层的 td 样式——因为它们只有正常的优先级。但是 - 这有点像你的情况下不必要的黑客攻击。

更好的做法是使用 td.v-formlayout-captioncell 类