需要帮助 CSS 类引用标记标签答案

【问题标题】：Need help CSS class referring to markup-tag需要帮助 CSS 类引用标记标签
【发布时间】：2019-08-14 17:22:20
【问题描述】：

我正在使用 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 语法的新知识！但是，我遇到的最大问题似乎是我添加的填充参数被浏览器覆盖了。但是通过使用!important CSS 标志并这样编写类，它是固定的：

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

【问题讨论】：

感谢@Sotiris 的提示！但是正如您在我的编辑中看到的那样，问题已经得到了排序。 =)
如果!important 修复此问题，则存在特异性问题。如果您愿意，可以阅读更多相关信息css-tricks.com/855-specifics-on-css-specificity
我明白你的意思。我阅读了这篇文章，我绝对可以看到使用 !important 会在以后的开发过程中搞砸你。我不知道如何正确指定类......它太包裹在不同的自动生成的元素中，我无法理解它。但是，为了避免任何问题，我在 html 标记中添加了一个新的类名，并在样式表中引用它。现在不应该有任何不幸的未来，我希望.. =)

【解决方案1】：

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

td.v-formlayout-captioncell

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

编辑：

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

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

那么 b 类中的任何东西都会覆盖 a 类中类似的东西。

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

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

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

【讨论】：

+1 感谢您的回答！但是，我似乎没有让它工作......根据你在这里提出的这个推理，我假设当我尝试'v-formlayout-row td'时它真的应该工作！但事实并非如此！我似乎无法正确... =（看不出问题可能是什么
formatrow 不起作用的原因是因为 CSS 总是选择最里面的样式，即如果您有 <tr class="a"><td class="b"></td></tr>，那么 b 类中的任何内容都会覆盖 a 类中的任何类似内容。