Question

我有一些表格单元格，我想设置一个高度。
当我直接在元素上设置高度时，它的工作方式完全正确：

<td class="row-separator" style="height: 5px;"></td>

但是当我尝试从我页面顶部的CSS中执行此操作时，它无法正常工作：

td.row-separator {
  height: 5px;
  border-left: 0;
  border-right: 0;
  background-color: grey;
}

应用所有其他CSS属性，但不应用高度。这在Firefox和IE中都会发生。可能导致这种情况的原因是什么？

Answer 1

必须有其他CSS 也会影响height的{{1}}。由于内联样式（在td属性中直接在HTML元素上声明的那些样式）意味着覆盖任何外部定义，因此它可能适用。您可以在webbrowser的检查器中轻松检查它。

见这两个例子：

＆＃13;

style

＆＃13;

#box p {
  font-size: 32px;
}
p.some-text {
  font-size: 16px;
}

＆＃13;

（提示，即使你的代码没有它：这个例子也说明了为什么你不应该在你的CSS中使用<div id="box"> <p class="some-text">This is 32px because #box makes the selector way more specific than p.some-text</p> <p class="some-text" style="font-size: 16px;">Inline styles have the highest specificity and can only be overwritten using !important (which you should not)</p> </div>选择器。）

要了解有关CSS＆＃34;优先级排序＆＃34;的更多信息（这被称为特异性），你可以从这里开始：

特异性是浏览器决定哪些CSS属性值与元素最相关的方式，因此将被应用。

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

TD高度适用于元素，但不适用于CSS

1 个答案: