1

我已经对此进行了很多搜索，但仍然无法理解该行为的原因。我有一个指定了宽度属性的 td 元素，并且我还在 css 类中指定了宽度。但是css类中的宽度是反映，不是元素的宽度属性优先级更高吗？

示例代码：

<table class="sample">
  <tr>
    <td width="70%" class="cell">First cell</td>
    <td class="cell">Second cell</td>
  </tr>
</table>

CSS

table.sample {
  border: 1px solid red;
  width: 100%;
}
td.cell {
  border: 1px solid black;
  width: 40%;
}

我知道不推荐使用宽度属性并且不建议使用，我试图理解这种行为，因为我必须解决一个类似的问题，我有很多页面使用样式 td.cell 但我需要在一页中覆盖它，我可以选择一种方式的样式属性，或者定义另一个样式类。

4

3 回答 3

1 
<table width="100%" class="sample">
  <tr>
    <td width="70%" class="cell">First cell</td>
    <td width="30%" class="cell">Second cell</td>
  </tr>
</table>

CSS：-

table.sample {
  border: 1px solid red;
}
td.cell {
  border: 1px solid black;
}
于 2013-05-30T07:08:41.973 回答
1

来自CSS 2.1 规范

6.4.4 非 CSS 表示提示的优先级

UA 可以选择尊重 HTML 源文档中的表示属性。如果是这样，这些属性将被转换为特定性等于 0 的相应 CSS 规则，并被视为插入到作者样式表的开头。因此，它们可能会被后续样式表规则覆盖。在过渡阶段，此策略将使样式属性更容易与样式表共存。

所以 CSS 样式在 HTML 中的排名总是高于表现属性。

于 2013-05-30T07:32:30.223 回答
0

当您编写时 <td width="70%" class="cell">First cell</td>，一旦浏览器解析这一行，它将生成一列，其属性为宽度。但是当你写喜欢

<td style="width:70%" class="cell">First cell</td>

它将成为 的一个属性style，因此就像你所说的内联 CSS。所以你的外部 CSS 现在不能覆盖它。

试试这样：-

<table class="sample">
  <tr>
    <td style="width:70%" class="cell">First cell</td>
    <td class="cell">Second cell</td>
  </tr>
</table>

只需在标记中写入Width即可将其定义为属性。所以你的CSS覆盖了这个......

看到这个：-属性和属性之间的区别
，这是您查询的答案：-图像大小应该在 img 标签的高度/宽度属性中定义还是在 CSS 中定义？

于 2013-05-30T07:04:42.440 回答