td的width属性不会重写css width属性

Question

我对此进行了大量的搜索，但仍然无法理解这种行为的原因。我有一个指定了width属性的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，但我需要在一个页面中覆盖它，我可以使用单向样式属性，或者定义另一个样式类。

Answer 1

从CSS 2.1 spec

6.4.4非CSS表现性提示的优先级

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

所以CSS样式总是比HTML中的表象属性排名更高。

Answer 2

<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;
}

Answer 3

当您编写<td width="70%" class="cell">First cell</td>时，一旦浏览器解析了这一行，它将生成一个属性为width的列。但是当你这样写的时候

<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覆盖了这个...

请看这个:- Difference between property and attribute

这就是你的问题的答案:- Should image size be defined in the img tag height/width attributes or in CSS?