css - 无法覆盖 CSS 填充

Question

我有以下应用于表格的 CSS:

.myTable
{
  width: 99%;
  border-collapse:collapse;
  word-wrap:break-word;
  border:1px solid #28282C;
  background-color: #F7F6F3;
}

.myTable td
{    
  padding: 16px 4px 0px 4px;
  text-align:left;
  vertical-align:top;    
}

因为我不想将填充应用到表格中的表单元素，所以我还有这个 CSS:

.myTable td input
{    
  padding:0px 0px 0px 0px !important;     
}

但是，这是行不通的。填充物顽固地保持不变，除非我放入更大的填充物。例如，如果我这样做:

.myTable td input
{    
  padding:50px 50px 50px 50px !important;     
}

然后表单元素被更新的、巨大的填充正确覆盖。我在这里错过了什么？如何使用 CSS 覆盖/取消子元素上的填充？

编辑:我在深入研究呈现的 HTML 后发现了它。输入元素很好，原因是 ASP.NET 在其自己的 TD 中呈现复选框列表中的每个复选框，它从样式表接收填充并使输入看起来像是被填充了。谢谢大家

Answer 1

这与您输入的完全一样。您已将填充应用于 TD。这会将填充应用于每个 TD，而不管其中包含什么。

您的第二种输入样式是除了在 TD 上设置的填充。所以它没有覆盖任何东西。

您可以尝试对 INPUT 应用负边距以抵消父 TD 中的填充。不确定是否所有浏览器都会喜欢。

或者，为具有输入的 TD 指定它们自己的类:

<td class="withInput">

然后你可以在你的 CSS 中使用这个选择器:

td.withInput {padding: 0px;}