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

我理解width属性已被弃用，不建议使用，我试图理解行为，因为我必须修复类似的问题，我有很多页面使用样式td.cell但我需要覆盖它一页，我可以去单向的style属性，或者定义另一个样式类。

Answer 1

来自CSS 2.1 spec

6.4.4非CSS表示提示的优先顺序

UA可以选择在HTML源中表示表示属性   文献。如果是，则将这些属性转换为相应的属性   CSS规则的特异性等于0，并被视为具体   插入作者样式表的开头。因此他们可能是   被后续样式表规则覆盖。在过渡阶段，   此政策将使风格属性更容易共存   样式表。

因此，CSS样式总是超出HTML中的表现属性。

Answer 2

当您编写<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>

只需在标记中写宽度即可将其定义为属性。所以你的Css压倒了......

请参阅： - Difference between property and attribute
这是您查询的答案： - Should image size be defined in the img tag height/width attributes or in CSS?

Answer 3

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

td的width属性不会覆盖css width属性

3 个答案: